Formulaires

Zone de dépôt de fichier

nouveauClasses hb-dropzone hb-dropzone--overVuetify 2 v-file-input pour un champ simpleVuetify 3 v-file-input

Quand l'utiliser

Pour un fichier attendu (facture PDF, photo d'un bon, import Excel) quand le glisser-déposer a du sens : poste de bureau, crm-front. Sur tablette, un bouton « Prendre une photo » vaut mieux. Pour un champ de fichier dans un formulaire dense, v-file-input.

Déposer la facture PDFou cliquer pour choisir un fichier · 10 Mo max

Lâcher pour déposerfacture-pomona.pdf

Code

<label class="hb-dropzone" style="max-width:480px"><i class="material-icons">upload_file</i><b>Déposer la facture PDF</b><span>ou cliquer pour choisir un fichier · 10 Mo max</span><input type="file" accept="application/pdf"></label>
<div class="hb-dropzone hb-dropzone--over" style="max-width:480px"><i class="material-icons">upload_file</i><b>Lâcher pour déposer</b><span>facture-pomona.pdf</span></div>

Comportement

La zone est un <label> : le clic ouvre le sélecteur de l'<input type="file"> caché. Au dragover, l'application pose hb-dropzone--over et le retire au dragleave / drop. Après dépôt, la zone se remplace par la liste des fichiers (nom, taille, bouton Retirer) ou par l'aperçu. Les formats et la taille maximale sont dits dans le texte, pas seulement dans accept.