Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Téléversements de fichiers

Les téléversements de fichiers permettent aux utilisateurs de téléverser des documents et des images.

Conseils

Un champ de téléversement de fichier est un type d’élément d’intrant qui permet aux utilisateurs de sélectionner des fichiers depuis leur appareil et de les téléverser. Il est souvent utilisé dans les formulaires pour permettre aux utilisateurs de soumettre des documents et des images. Vous devez uniquement demander aux utilisateurs de téléverser les fichiers qui sont essentiels à la prestation des services.

À faire

  • Utilisez l'attribut accept dans l’élément input HTML pour spécifier les types de fichiers acceptés.
  • Indiquez aux utilisateurs quels sont les types de fichiers acceptés et leur taille maximale.

À ne pas faire

  • N’utilisez pas de composant de téléversement sans appliquer de validation.

Téléversement d’un fichier unique

Ce champ lance la boîte de dialogue Parcourir les fichiers.

Vous pouvez téléverser des fichiers PNG, JPG, JPEG ou PDF.

HTML

<!-- Champ de téléchargement de fichier basique -->
<label for="file">Fichier</label>
<input type="file" id="file" accept="image/*, .pdf">

Téléversement de plusieurs fichiers

Ce composant offre la possibilité de faire glisser ou de parcourir et de sélectionner plusieurs fichiers à téléverser.

Téléversement de fichier par glisser-déposer

Sélectionnez ou glissez-déposez des fichiers PNG, JPG, JPEG ou PDF (max 15MB).

HTML

<!-- Téléchargement de fichier par glisser-déposer -->
<fieldset class="fieldset-container-dashed file-upload centered">
<legend class="sr-only">Téléchargement de fichier par glisser-déposer</legend>
<i class="fa-solid fa-file-arrow-up"></i>
<p>
<a href="#">Sélectionnez</a> ou glissez-déposez des fichiers PNG, JPG, JPEG ou PDF (max 15MB).
</p>
</fieldset>