1. Komponenty

Nahrání souboru

angl. File Uploader

Umožňuje nahrání souboru přetažením nebo výběrem ze zařízení.



<form action="()" method="post" class="drop-area" data-toggle="file-drop" enctype="multipart/form-data">
    <h3 class="drop-area__title">
        <span class="d-block d-lg-none">Nahrajte soubor</span>
        <span class="d-none d-lg-block">Přetáhněte soubor</span>
    </h3>
    <p class="d-none d-lg-block drop-area__text smaller">nebo</p>
    <input type="file" class="inputfile sr-only" id="file-upload" accept="image/*" data-multiple-caption="{count} files selected" multiple="multiple" hidden="hidden">
    <label for="file-upload" class="btn btn-outline-primary drop-area__btn" aria-controls="file-upload" tabindex="0">
        <span class="d-block d-lg-none">ze složky</span>
        <span class="d-none d-lg-block">Nahrajte z počítače</span>
    </label>
</form>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

  • Jako výchozí text tlačítka používejte Nahrajte z počítače
  • Pokud je název vloženého souboru delší než nadřazený prvek, použijte pro delší část názvu tečky (…)
  • Pokud existují omezení na formát nebo velikost nahrávaného souboru, upozorněte na to uživatele předem

Přetažení souboru

Komponenta je řešena funkcionalitou Drag and drop (přetažení myší), kdy uživatel může přetáhnout soubor z počítače do vyznačeného místa. Tato komponenta se používá spíše v aplikacích, nepoužívá se ve formulářích.

Interakce

  1. Uživatel může vybrat najednou jeden nebo více souborů. Ve výchozím nastavení je akceptován jakýkoliv typ souboru, ale můžete přidat parametry pro ověření konkrétního typu souboru.
  2. Kliknutím na Nahrajte z počítače se spustí specifické okno prohlížeče pro nahrání souboru.
  3. Jakmile uživatel vybere soubory, specifické okno prohlížeče, pro nahrání souboru, se zavře a soubory se objeví nad tlačítkem Nahrajte z počítače
  4. Chyby, které vznikly nahráním souboru, zobrazujte červeným písmem (#e04857) jako u Formuláře.

Odebrání nahraných souborů

Vývojáři použijí JavaScript pro vložení ikony “fa-remove” ke každému souboru, který je vybrán k nahrání. Použité piktogramy najdete na stránce Ikony. Mějte však na paměti, že tento druh úpravy není v prohlížeči nativně podporován.

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Užitečné odkazy