Pole na nahratie súboru (File Upload)
Pole na nahratie súboru umožňuje používateľovi vybrať jeden alebo viac súborov zo svojho zariadenia, prípadne ich presunúť do určenej oblasti pomocou drag and drop. Komponent musí používateľovi jasne oznámiť účel poľa, podporované formáty, maximálnu veľkosť a stav nahrávania.
Použitie poľa na nahratie súboru
Nahrajte životopis
Spresnite požiadavku na nahrávaný súbor.
Pole na nahratie súboru použite vtedy, keď používateľ potrebuje dodať dokument, obrázok alebo inú prílohu, ktorú nie je praktické nahradiť textovým vstupom. Komponent má vždy jasne pomenovať, aký súbor má používateľ nahrať.
Pri nahrávaní uveďte podporované formáty, maximálnu veľkosť súboru a zobrazte stav nahrávania. Používateľ má vedieť, či sa súbor nahráva, či bol nahratý úspešne alebo či nastala chyba.
Ako sa používa
- ak používateľ potrebuje dodať dokument, obrázok alebo prílohu,
- ak súbor nie je možné nahradiť textovým vstupom,
- s jasným názvom poľa, napríklad „Nahrajte životopis“,
- s informáciou o podporovaných formátoch,
- s informáciou o maximálnej veľkosti súboru,
- so spätnou väzbou o nahrávaní, úspechu alebo chybe.
Ako sa nepoužíva
- ak súbor nie je pre dokončenie úlohy nevyhnutný,
- bez informácie o povolených formátoch,
- bez informácie o maximálnej veľkosti súboru,
- iba ako drag and drop bez možnosti vybrať súbor tlačidlom,
- bez stavovej spätnej väzby po výbere súboru,
- s ikonovými tlačidlami bez prístupného názvu.
Varianty a stavy
1. Základný stav
Základný stav zobrazuje názov poľa, inštrukciu, podporované formáty, maximálnu veľkosť súboru a tlačidlo na výber súboru.
Nahrajte životopis
Spresnite požiadavku na nahrávaný súbor.
2. Stav nahrávania
Pri nahrávaní musí byť viditeľný názov súboru a priebeh nahrávania. Progress bar je natívny HTML prvok progress.
Nahrajte prílohu
Spresnite požiadavku na nahrávaný súbor.
Nahrané súbory
- Nahrávanie súboru potvrdenie-o-prijme.pdf prebieha. Priebeh nahrávania je 65 %.
potvrdenie-o-prijme.pdf
Priebeh nahrávania súboru potvrdenie-o-prijme.pdf65 %
3. Úspešne nahratý súbor
Pri úspešnom nahratí sa zobrazí názov súboru, jeho veľkosť a tlačidlo na odstránenie súboru s prístupným názvom.
Nahrajte dokument
Spresnite požiadavku na nahrávaný súbor.
Nahrané súbory
- Súbor potvrdenie-o-prijme.pdf bol úspešne nahraný.
potvrdenie-o-prijme.pdf
305 KB
4. Chybový stav
Chybový stav používa červené orámovanie riadku, výstražnú ikonku a textové vysvetlenie chyby.
Nahrajte prílohu
Spresnite požiadavku na nahrávaný súbor.
Nahrané súbory
- Súbor archiv-dokumentov.zip sa nepodarilo nahrať.
archiv-dokumentov.zip
Chyba: Nepodarilo sa nahrať súbor. Nahrajte súbor vo formáte JPG, PNG, DOC, DOCX alebo PDF.
5. Povinné pole s chybou
Ak je nahratie súboru povinné, chybové hlásenie musí byť programovo prepojené s poľom pomocou aria-describedby.
Nahrajte životopis
Spresnite požiadavku na nahrávaný súbor.
Chyba: Životopis je povinný. Nahrajte súbor vo formáte JPG, PNG, DOC, DOCX alebo PDF.
6. Neaktívny stav
Neaktívny komponent nepovoľuje kliknutie, presunutie súboru ani zameranie file inputu.
Nahrajte životopis
Momentálne nie je možné nahrať súbor.
7. Variant bez drag and dropu
Tento variant používa iba tlačidlo na výber súboru bez drag and drop oblasti. Je vhodný pre jednoduchšie formuláre.
Nahrajte životopis
Nahrajte jeden súbor so životopisom.
Nie je vybraný žiadny súbor.
Maximálna veľkosť súboru: 15 MB
8. Variant bez drag and dropu – úspešne vybraný súbor
Po úspešnom výbere sa nad tlačidlom zobrazí stavová lišta s názvom súboru, veľkosťou a možnosťou odstránenia.
Nahrajte dokument
Nahrajte jeden dokument.
Nahrané súbory
- Súbor potvrdenie-o-prijme.pdf bol úspešne nahraný.
potvrdenie-o-prijme.pdf
305 KB
Vybraný je 1 súbor.
Maximálna veľkosť súboru: 15 MB
9. Variant bez drag and dropu – chybový stav
Ak sa súbor nepodarí pridať, zobrazí sa chybová lišta nad tlačidlom a používateľ môže súbor odstrániť.
Nahrajte prílohu
Nahrajte jeden súbor ako prílohu.
Nahrané súbory
- Súbor archiv-dokumentov.zip sa nepodarilo nahrať.
archiv-dokumentov.zip
Chyba: Nepodarilo sa nahrať súbor. Nahrajte súbor vo formáte JPG, PNG, DOC, DOCX alebo PDF.
Vybraný je 1 súbor.
Maximálna veľkosť súboru: 15 MB
10. Variant bez drag and dropu – neaktívny stav
V neaktívnom stave nie je možné otvoriť systémový dialóg na výber súboru.
Nahrajte životopis
Momentálne nie je možné nahrať súbor.
Nie je vybraný žiadny súbor.
Maximálna veľkosť súboru: 15 MB
Prístupnosť (Accessibility)
Komponent je navrhnutý tak, aby podporoval požiadavky WCAG 2.1 AA. Výsledná prístupnosť závisí aj od konkrétnej implementácie, textov chýb a validácie vo formulári.
Ovládanie klávesnicou
Tab– presun zamerania klávesnice na nasledujúci prvok.Shift + Tab– presun zamerania klávesnice na predchádzajúci prvok.Enter– aktivovanie tlačidla na výber súboru.Medzerník– aktivovanie tlačidla na výber súboru.
Základné technické pravidlá implementácie
- Každé pole musí mať jednoznačný, programovo určiteľný názov prostredníctvom prvku
<label>, ktorý je s poľom previazaný pomocou atribútuforodkazujúceho na jedinečnéidprvku<input type="file">. - Celý komponent je implementovaný ako pomenovaná oblasť pomocou
role="region". Názov oblasti je odvodený z viditeľného nadpisu pomocouaria-labelledby. - Atribút
aria-describedbyje implementovaný priamo na prvku<input type="file">. Odkazuje na inštrukciu, podporované formáty, maximálnu veľkosť súboru a prípadné chybové hlásenie. - Tlačidlo na výber súboru má tiež nastavený atribút
aria-describedbya obsahuje vizuálne skrytý text, ktorý dopĺňa kontext názvu poľa. - Pre obmedzenie formátov súborov používajte atribút
accept, napríkladaccept=".pdf,.jpg,.png". - V prípade chybového stavu musí mať prvok
<input type="file">nastavený atribútaria-invalid="true". - Indikátor priebehu nahrávania je implementovaný pomocou natívneho prvku
<progress>. - Po úspešnom nahratí súboru alebo po jeho odstránení zo zoznamu je zmena oznámená prostredníctvom
aria-live="polite"regiónu. - Nahraté súbory sú implementované ako sémantický zoznam pomocou prvkov
<ul>a<li>. - Každé tlačidlo na odstránenie súboru musí mať jedinečný prístupný názov, napríklad
aria-label="Odstrániť súbor zivotopis.pdf". - Dekoratívne ikonky musia byť skryté pred asistenčnými technológiami pomocou
aria-hidden="true". - Texty „Nahrajte súbor“ a „Nahrané súbory“ sú implementované ako sémantické nadpisy. Nadpis „Nahrané súbory“ je vnorený pod nadradený nadpis „Nahrajte súbor“.
Implementácia poľa na nahratie súboru z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia (ak chcete používať makrá).
Možnosti implementácie
1. Statická HTML implementácia (HTML + minifikované súbory)
Ak váš projekt nevyužíva Node.js alebo bundler (napr. Webpack, Vite), môžete použiť hotové buildy. Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:
- selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
- zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických kombinácií
- prispôsobiť si kód (napríklad prepísať farby alebo povoliť globálne štýly)
- použiť dynamické komponenty z Nunjucks šablón
Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý assets priečinok a minifikované súbory do rootu vášho projektu. Štruktúra by mala vyzerať približne takto:
project/
│
├── assets - images
- fonts
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript.
<!DOCTYPE html>
<html>
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu pole na nahratie súboru (otvorí sa v novom okne) a vložte ho do svojho HTML. Ak používate čisté HTML, uistite sa, že máte unikátne id pre vstupný prvok.
<div class="govuk-form-group file-upload-component js-enabled" data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input" data-file-input id="fileInput" type="file" aria-describedby="uploadInstructions" hidden>
<div class="upload-box">
<label for="fileInput" aria-label="Nahratie súboru"></label>
<div class="upload-icon" aria-hidden="true">
<span class="material-icons" aria-hidden="true">cloud_upload</span>
</div>
<div class="upload-text" id="uploadInstructions">
<p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
<p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
</div>
<button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu">
<span class="material-icons" aria-hidden="true">add</span>
<span>Pridať prílohu</span>
</button>
</div>
</div>
</div>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balíkPre inštaláciu cez NPM spustite (po skončení inštalácie sa balík
@id-sk/frontendobjaví vnode_modules):npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru (či už .html alebo .njk) vložte kód, ktorý nájdete vyššie.
- Importujte štýlyPre import individuálneho IDSK komponentu, v tomto prípade Poľa na nahratie súboru, do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/file-upload/file-upload"; - Importujte JavascriptID-SK Frontend komponenty s JavaScript správaním majú vo svojom markupe nastavený atribút
data-module. Pre import javascriptu poľa na nahratie súboru, vložte do .js súboru:import { FileUpload, createAll } from 'govuk-frontend' createAll(FileUpload)