Încărcare avansată de fișiere

Prezentare

Adaugă listă de fișiere selectate, eliminare individuală și zonă drag-and-drop peste inputul nativ `<input type="file">`, fără a-l înlocui.

Când se folosește

• pentru încărcarea a mai multe fișiere, unde utilizatorul beneficiază să vadă și să elimine individual fișierele deja alese înainte de trimitere.

Când nu se folosește

• pentru un singur fișier obligatoriu, fără nevoie de listă sau drag-and-drop — `file-upload` simplu e suficient și mai puțin complex.

Anatomie

Un `<div class="sd-file-upload-advanced" data-sd-file-upload data-sd-file-dropzone>` cu `<label>`, `<input type="file" multiple>`, `<ul class="sd-file-upload__list" data-sd-file-list>` (populată de JavaScript) și un `<p aria-live="polite" data-sd-file-status>` pentru anunțarea numărului de fișiere.

Variante

• implicit — un singur fișier sau `multiple`, după atributul inputului nativ

Stări

• `[data-sd-drag-active="true"]` pe zona de drop, în timpul unei operații de tragere

Comportament

Fără JavaScript: inputul nativ `type="file"` rămâne complet funcțional, fără listă sau drag-and-drop — degradarea e la selecția standard a browserului, nu la un control mort. Cu JavaScript (`enhanceFileUploads`): la fiecare schimbare, randează lista de fișiere cu dimensiune formatată (`formatFileSize`, unități B/KB/MB, format românesc) și un buton „Elimină” per fișier, care actualizează lista internă și reconstruiește `input.files` printr-un `DataTransfer`; suportă și drag-and-drop peste zona marcată `data-sd-file-dropzone`, respectând `multiple` la adăugare.

Reguli de conținut

• instrucțiunile din `.sd-file-upload-advanced__instructions` menționează formatele și dimensiunea maximă acceptate, dacă există restricții server-side.

Responsabilitățile implementatorului

• validează tipul și dimensiunea fișierelor server-side — reconstrucția `input.files` prin `DataTransfer` e doar pentru experiența utilizatorului, nu o barieră de securitate.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (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/interactive.css';

import { enhanceFileUploads } from '@sistem-digital/components';

<div class="sd-file-upload-advanced" data-sd-file-upload data-sd-file-dropzone><label class="sd-label" for="catalog-files">Documente</label><input id="catalog-files" type="file" multiple><ul class="sd-file-upload__list" data-sd-file-list></ul><p class="sd-visually-hidden" aria-live="polite" data-sd-file-status></p></div>

Contract și surse

• Documentația familiei Interactive
• 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).