Încărcare fișier

Prezentare

Păstrează inputul nativ de fișier pentru selectare, fără o reconstrucție vizuală care ar putea pierde comportamentul accesibil implicit al browserului.

Când se folosește

• pentru încărcarea unui singur document, fără nevoia de listă, eliminare individuală sau drag-and-drop;
• ca variantă simplă, de bază — pentru încărcare multiplă cu listă și drag-and-drop, vezi `file-upload-advanced` (familia Interactive).

Când nu se folosește

• când sunt necesare mai multe fișiere cu listă vizibilă și eliminare individuală — acolo `file-upload-advanced` e componenta corectă, nu o extindere manuală a acesteia.

Anatomie

Un `<input class="sd-file-input" type="file">`, cu `label` asociat separat prin `for`/`id`, ca orice alt control de formular.

Variante

• implicit — o singură variantă

Stări

• implicit
• :hover
• `aria-invalid="true"`
• :disabled

Comportament

Element `<input type="file">` HTML nativ; butonul de selectare (`::file-selector-button`) e stilizat prin pseudo-element CSS, fără JavaScript. Dispare complet la print (`display: none` în `@media print`), pentru că selectarea unui fișier nu are sens pe hârtie.

Reguli de conținut

• label-ul spune ce document se așteaptă, iar formatele acceptate (PDF, PNG, JPG) apar explicit în `hint`, nu doar în atributul tehnic `accept`.

Responsabilitățile implementatorului

• pentru demonstrații (ca în serviciile de referință), memorează doar numele fișierului, niciodată conținutul — comunicat explicit persoanei, conform principiului de minimizare a datelor.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/49 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/forms.css';

<label class="sd-label" for="catalog-file">Document justificativ</label><input class="sd-file-input" id="catalog-file" type="file">

Contract și surse

• Documentația familiei Formulare
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).