Téléversement

Zone d’invitation au dépôt de fichiers avec états d’erreur et rappel du fichier choisi.

Exemple

JustificatifPDF ou image — 5 Mo max.

Jusqu’à 3 pièces pour cette étape.

État actif (démo)
Autre icône
Erreur
Fichier sélectionné
attestation.pdf
<div class="bj-upload-group">
  <label class="bj-label" for="uf">Justificatif</label>
  <span class="bj-hint">PDF ou image, 5 Mo max.</span>
  <div class="bj-upload" role="button" tabindex="0">
    <i class="ri-upload-2-line bj-upload__icon" aria-hidden="true"></i>
    <span class="bj-upload__text">Glissez un fichier ou cliquez pour parcourir</span>
    <span class="bj-upload__hint">Formats acceptés sur cette étape.</span>
    <input id="uf" type="file" accept=".pdf,image/*" multiple />
  </div>
  <p class="bj-message bj-message--info" role="status">Vous pouvez ajouter jusqu’à 3 fichiers.</p>
</div>

Groupe complet (libellé, aide, texte, icône, formats)

Le composant Vue compose bj-upload-group, bj-label, bj-hint, zone bj-upload avec bj-upload__icon (classe d’icône Remix en plus), bj-upload__text, bj-upload__hint, input type="file" avec accept et multiple, puis message bj-message--info ou bj-message--error.

Variantes

bj-upload-group--error, bj-upload__file, bj-upload__file-remove.

Classes CSS

ClasseDescription
bj-labelLibellé et aide (comme les autres champs).
bj-hintLibellé et aide (comme les autres champs).
bj-upload-groupGroupe.
bj-upload-group--errorErreur.
bj-uploadZone (conteneur position:relative).
bj-upload--drag-overSurvol actif.
bj-upload__text / bj-upload__hint / bj-upload__iconContenu.
(input file: accept, multiple)Attributs <code>accept</code> et <code>multiple</code> sur <code>input type="file"</code>.
bj-message--info / bj-message--errorMessage sous la zone : <code>bj-message--info</code> ou <code>bj-message--error</code>.
bj-upload__file / bj-upload__file-removeFichier choisi.

Accessibilité

Reliez l’input à une étiquette (aria-labelledby ou label). Décrivez formats et tailles dans le texte visible.