Fra i tipi di campo disponibili per la compilazione dei form HTML è disponibile anche il tipo file. Questi campi di input consentono l’upload di uno o più file attraverso l’invio del form.
In questa pagina vengono presentate varianti grafiche e funzionali per questo tipo di input.
Upload con lista di file
All’interno di un <form> inserire un campo input di tipo file con classe .upload, seguito da una label il cui attributo for="" deve corrispondere con il name e l’id del campo input.
I file caricati sono elencati come elementi <li> di una lista <ul> con classe .upload-file-list.
Ogni elemento può avere tre differenti stati e relative classi:
.loading per i file in caricamento
.success per i file caricati correttamente
.error in caso di errori
Gli elementi presenti in questa pagina sono disponibili unicamente come HTML/CSS e non includono script di upload.
Questi dovranno essere sviluppati ed implementati dai developers che intendono farne uso.
Accessibilità
Durante lo sviluppo degli script di gestione degli upload prestare particolare attenzione all’accessibilità.
Ad esempio, come è evidente dal codice sottostante, è sempre necessario includere informazioni accessibili relative allo stato, quando questo è comunicato solamente attraverso elementi grafici. In questo caso si è fatto uso di testo alternativo riservato agli screen reader utilizzando la classe .sr-only.
Con anteprima delle immagini
Alle icone SVG rappresentative dei file si sostituiscono le thumbnail delle immagini caricate.
Alla lista <ul> con classe .upload-file-list va aggiunta la classe .upload-file-list-image.
Il componente ottimizza la visualizzazione delle immagini anche quando queste non hanno proporzione quadrata, si consiglia comunque di utilizzare immagini dal peso contenuto.
Upload con Avatar
Questo elemento combina la visualizzazione dell’immagine Avatar con l’input tipo file per permettere l’upload di una nuova immagine.
L’Avatar contenuto ha la classe specifica .avatar-upload ed è sempre di tipo .size-xxl.
È possibile utilizzare due dimensioni: quella piccola si ottiene aggiungendo la classe .size-sm al wrapper <div class="avatar-upload-wrapper">.
Ci si aspetta venga caricato un solo file (immagine) il form non ha quindi l’attributo multiple="multiple".
L’elemento ha design e comportamento differenti in versione mobile si consiglia quindi di ridurre le dimensioni della finestra del browser per testare questa versione.
Dimensione Standard
Dimensione Piccola
Upload Gallery
Per gestire il caricamento di una serie di foto e l’anteprima delle stesse in forma di Gallery con thumbail, includere un input file con classi .upload e .pictures-wall come elemento <li> di una lista <ul> con classe .upload-file-wall.
Le immagini caricate andranno aggiunte in testa alla lista <ul> come elementi <li> con classe upload-image.
Anche in questo caso, nonostante il componente ottimizzi la visualizzazione delle immagini quando queste non hanno proporzione quadrata, si consiglia comunque di utilizzare immagini dal peso contenuto.
Esempio Immagini Caricate
Upload Drag&drop
Questa versione dell’upload permette all’utente di trascinare sull’icona che la caratterizza un file dal proprio dispositivo.
In questo caso è l’interno form ad avere una classe specifica upload-dragdrop alla quale possono essere aggiunte due ulteriori classi per la gestione degli stati:
.dragover quando un file è trascinato sull’icona
.loading quando un file è rilasciato sull’icona
.success quando un file è stato caricato con successo
I primi due stati sono gestiti dal codice JS incluso nello UI-Kit, lo stato di success dipende dal caricamento corretto del file sul server e va quindi gestito da chi svilupperà il font/back-end del sito o webapp.
Lo stato dell’upload è rappresentato graficamente dall’elemento <div id="divProgress0" class="upload-progress"></div> come progress circolare. Si consiglia di attribuire ad ogni upload-progress un id univoco per facilitare l’aggiornamento del progresso attraverso il seguente codice JS:
$('#IDPROGRESS').circularloader({progressPercent:33,// percentuale si caricamento})