Unito.it

Tema Unito v 3 / 3.1

Upload

Per gestire l’upload di uno o più file attraverso l’invio del form.

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 raltive classi:

  • .loading per i file in caricamento
  • .success per i file caricati correttamente
  • .error in caso di errori

Per utilizzare una immagine di anteprima al posto dell'icona SVG, alla lista <ul> con classe .upload-file-list va aggiunta la classe .upload-file-list-image.

  • File caricato: nome-file-01.pdf 68 MB

  • File caricato: nome-file-02-nome-file-lungo-per-ellissi.doc 68 MB

  • Caricamento file: nome-file-03.png

  • Errore caricamento file: nome-file-04.jpg

  • descrizione immagine

    nome-file-04.jpg 

            <form method="post" action="" enctype="multipart/form-data">
                <input type="file" name="upload1" id="upload1" class="upload" multiple="multiple">
                <label for="upload1">
                    <svg role="img" aria-describedby="my-title" class="icon icon-sm" aria-hidden="true">
                    <title id="my-title">Upload</title><use xlink:href="./dist/svg/sprite.svg#it-upload"></use></svg>
                    <span>Upload</span>
                </label>
                <ul class="upload-file-list">
                    <li class="upload-file success">
                        <svg role="img" aria-describedby="my-title1" class="icon icon-sm" aria-hidden="true">
                        <title id="my-title1">File</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
                        <p>
                            <span class="sr-only">File caricato:</span>
                            nome-file-01.pdf <span class="upload-file-weight">68 MB</span>
                        </p>
                        <button disabled="">
                            <span class="sr-only">Caricamento ultimato</span>
                            <svg role="img" aria-describedby="my-title2" class="icon" aria-hidden="true">
                            <title id="my-title2">Caricamento ultimato</title><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg>
                        </button>
                    </li>
                    <li class="upload-file success">
                        <svg role="img" aria-describedby="my-title3" class="icon icon-sm" aria-hidden="true">
                        <title id="my-title3">File caricato</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
                        <p>
                            <span class="sr-only">File caricato:</span>
                            nome-file-02-nome-file-lungo-per-ellissi.doc <span class="upload-file-weight">68 MB</span>
                        </p>
                        <button disabled="">
                            <span class="sr-only">Caricamento ultimato</span>
                            <svg role="img" aria-describedby="my-title4" class="icon" aria-hidden="true">
                            <title id="my-title4">Caricamento ultimato</title><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg>
                        </button>
                    </li>
                    <li class="upload-file uploading">
                        <svg role="img" aria-describedby="my-title5" class="icon icon-sm" aria-hidden="true">
                        <title id="my-title5">Caricamento file</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
                        <p>
                            <span class="sr-only">Caricamento file:</span>
                            nome-file-03.png <span class="upload-file-weight"></span>
                        </p>
                        <button>
                            <span class="sr-only">Annulla caricamento file nome-file-03.png</span>
                            <svg role="img" aria-describedby="my-title6" class="icon" aria-hidden="true">
                            <title id="my-title6">Annulla caricamento</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use></svg>
                        </button>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </li>
                    <li class="upload-file error">
                        <svg role="img" aria-describedby="my-title7" class="icon icon-sm" aria-hidden="true">
                        <title id="my-title7">Errore caricamento file</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
                        <p>
                            <span class="sr-only">Errore caricamento file:</span>
                            nome-file-04.jpg <span class="upload-file-weight"></span>
                        </p>
                        <button>
                            <span class="sr-only">Elimina file caricato nome-file-04.jpg</span>
                            <svg role="img" aria-describedby="my-title8" class="icon" aria-hidden="true">
                            <title id="my-title8">Elimina file caricato</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use></svg>
                        </button>
                    </li>
                     <li class="upload-file error">
      <div class="upload-image">
        <img src="https://picsum.photos/120/200?image=1058" alt="descrizione immagine">
      </div>
      <p>
        <span class="visually-hidden">Errore caricamento immagine:</span>
        nome-file-04.jpg <span class="upload-file-weight"></span>
      </p>
      <button>
        <span class="visually-hidden">Elimina immagine caricata nome-file-04.jpg </span>
        <svg class="icon" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-close"></use></svg>
      </button>
    </li>
                </ul>
            </form>

Per gestire il caricamento di una serie di foto e l’anteprima delle stesse in forma di Gallery con thumbnail, 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.

Esempio Immagini Caricate

  • descrizione immagine
  • descrizione immagine 
<form method="post" action="" enctype="multipart/form-data">
  <ul class="upload-pictures-wall">
    <li>
      <input type="file" name="upload5" id="upload5" class="upload pictures-wall" multiple="multiple" />
      <label for="upload5">
        <svg class="icon icon-sm" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-plus"></use></svg>
        <span>Carica foto</span>
      </label>
    </li>
  </ul>
  <input value="Submit" type="submit" class="d-none" />
</form>

<p class="mt-5"><strong>Esempio Immagini Caricate</strong></p>

<form method="post" action="" enctype="multipart/form-data">
  <ul class="upload-pictures-wall">
    <li>
      <div class="upload-image">
        <img src="https://picsum.photos/128/128?image=1020" alt="descrizione immagine">
      </div>
    </li>
    <li>
      <div class="upload-image">
        <img src="https://picsum.photos/128/128?image=1038" alt="descrizione immagine">
      </div>
    </li>
    <li>
      <input type="file" name="upload6" id="upload6" class="upload pictures-wall" multiple="multiple" />
      <label for="upload6">
        <svg class="icon icon-sm" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-plus"></use></svg>
        <span>Carica foto</span>
      </label>
    </li>
  </ul>
  <input value="Submit" type="submit" class="d-none" />
</form>

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 e l’attributo data-bs-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 class="progress-donut" data-bs-progress-donut></div> come progress circolare.

Default

PDF (3.7MB)

Trascina il file per caricarlo

oppure

Caricamento in corso

PDF (3.7MB)

Nome file in caricamento

Caricamento in corso...

Caricamento completato

PDF (3.7MB)

Nome file caricato

Caricamento completato

<p><strong>Default</strong></p>
<form class="upload-dragdrop" method="post" action="" enctype="multipart/form-data" data-bs-upload-dragdrop>
  <div class="upload-dragdrop-image">
    <img src="./dist/assets/upload-drag-drop-icon.svg" alt="descrizione immagine" aria-hidden="true">
    <div class="upload-dragdrop-loading">
      <div class="progress-donut" data-bs-progress-donut></div>
    </div>
    <div class="upload-dragdrop-success">
      <svg class="icon" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-check"></use></svg>
    </div>
  </div>
  <div class="upload-dragdrop-text">
    <p class="upload-dragdrop-weight">
      <svg class="icon icon-xs" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-file"></use></svg> PDF (3.7MB)
    </p>
    <h5>Trascina il file per caricarlo</h5>
    <p>oppure <input type="file" name="upload7" id="upload7" class="upload-dragdrop-input" /><label for="upload7">selezionalo dal dispositivo</label></p>
  </div>
  <input value="Submit" type="submit" class="d-none" />
</form>

<p class="mt-5"><strong>Caricamento in corso</strong></p>

<form class="upload-dragdrop loading" method="post" action="" enctype="multipart/form-data" data-bs-upload-dragdrop>
  <div class="upload-dragdrop-image">
    <img src="./dist/assets/upload-drag-drop-icon.svg" alt="descrizione immagine" aria-hidden="true">
    <div class="upload-dragdrop-loading">
      <div class="progress-donut" data-bs-progress-donut></div>
    </div>
    <div class="upload-dragdrop-success">
      <svg class="icon" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-check"></use></svg>
    </div>
  </div>
  <div class="upload-dragdrop-text">
    <p class="upload-dragdrop-weight">
      <svg class="icon icon-xs" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-file"></use></svg> PDF (3.7MB)
    </p>
    <h5>Nome file in caricamento</h5>
    <p>Caricamento in corso...</p>
  </div>
  <input value="Submit" type="submit" class="d-none" />
</form>

<p class="mt-5"><strong>Caricamento completato</strong></p>

<form class="upload-dragdrop success" method="post" action="" enctype="multipart/form-data" data-bs-upload-dragdrop>
  <div class="upload-dragdrop-image">
    <img src="./dist/assets/upload-drag-drop-icon.svg" alt="descrizione immagine" aria-hidden="true">
    <div class="upload-dragdrop-loading">
      <div class="progress-donut" data-bs-progress-donut></div>
    </div>
    <div class="upload-dragdrop-success">
      <svg class="icon" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-check"></use></svg>
    </div>
  </div>
  <div class="upload-dragdrop-text">
    <p class="upload-dragdrop-weight">
      <svg class="icon icon-xs" aria-hidden="true"><use href="./dist/svg/sprite.svg#it-file"></use></svg> PDF (3.7MB)
    </p>
    <h5>Nome file caricato</h5>
    <p>Caricamento completato</p>
  </div>
  <input value="Invia" type="submit" class="d-none" />
</form>
Attivazione tramite JavaScript

È possibile creare un’istanza con il constructor, ad esempio:

var uploadElement = document.getElementById('uploadChangeStateTarget');
var uploadDragDrop = new bootstrap.UploadDragDrop(uploadElement)
Metodi
Metodo Descrizione
progress fa avanzare la barra e la percentuale di completamento. Deve essere un numero compreso tra 0 e 1.0
start fa comparire la barra e la percentuale di completamento
success fa comparire lo stato di avvenuto completamento dell'operazione
reset riporta la barra e la percentuale di completamento allo stato iniziale
getInstance Metodo statico che restituisce l'istanza UploadDragDrop associata ad un elemento del DOM. Esempio: bootstrap.UploadDragDrop.getInstance(element)
getOrCreateInstance Metodo statico che restituisce un'istanza UploadDragDrop associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.UploadDragDrop.getOrCreateInstance(element)
Torna su