Ajout de fichier - File upload

Ce composant est disponible depuis la version 1.2.0.
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire.
Soyez vigilants quant à son utilisation en production !


Ce composant permet aux utilisateurs de sélectionner et envoyer un ou plusieurs fichiers.

Structure

Le composant “ajout de fichier” est composé de :

  • Un label - le texte du label exprime clairement l’action attendu pour l’utilisateur, par défaut : “Ajouter un fichier” - obligatoire

  • Un texte explicatif qui précise les contraintes au niveau du ou des fichiers attendus : format, poids attendus, nombre de fichiers possible… - obligatoire

  • Le bouton “parcourir” et le texte des fichiers qui sont gérés en natif directement par le navigateur - obligatoire

Au clic sur parcourir, la boite de dialogue de sélection de fichier s’affiche. Les noms des fichiers sélectionnés viennent s’afficher à la place du texte par défaut.

 

1 2 3 4 5 6 <div class="fr-upload-group"> <label class="fr-label" for="file-upload">Ajouter des fichiers <span class="fr-hint-text">Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span> </label> <input class="fr-upload" type="file" id="file-upload" name="file-upload"> </div>

 

1 2 3 4 5 6 7 8 9 10 11 <!-- Erreur --> <div class="fr-upload-group fr-input-group--error"> <label class="fr-label" for="file-upload-with-error">Ajouter des fichiers <span class="fr-hint-text">Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span> </label> <input class="fr-upload" type="file" aria-describedby="file-upload-with-error-desc-error" id="file-upload-with-error" name="file-upload-with-error"> <p id="file-upload-with-error-desc-error" class="fr-error-text"> Format de fichier non supporté </p> </div>

 

1 2 3 <!-- Ajout multiple : ajout de l'attribut multiple sur la balise input --> <input class="fr-upload" type="file" id="file-upload" name="file-upload" multiple>

 

1 2 3 4 5 6 7 8 <!-- Désactivé--> <div class="fr-upload-group fr-input-group--disabled "> <label class="fr-label" for="file-upload">Ajouter un fichier <span class="fr-hint-text">Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span> </label> <input disabled class="fr-upload" type="file" id="file-upload" name="file-upload" > </div>

 

Règles d’utilisation

Usage

  • Demander aux utilisateurs d’envoyer un fichier doit être fait que si cela est vraiment essentiel à votre service.

  • Précisez les erreurs rencontrés lors de l’envoi de fichier :

    • Taille du fichier : préciser la taille du fichier attendu.

    • Format : redonner les types de fichiers autorisés.

  • Quand vous avec plusieurs fichiers à demander aux utilisateurs dans un même formulaire :

    • utiliser l’upload multiple - en ajoutant de l’attribut multiple sur l’input - quand vous demandez à l’utilisateur des fichiers de même nature et respectant les mêmes contraintes

    • utiliser plusieurs champs upload quand vous demandez à l’utilisateur des fichiers de différentes natures avec des contraintes spécifiques

Accessibilité

  • S’assurer de la pertinence du label (ex. “Téléchargez/Téléversez votre image de profil”)

  • Le texte descriptif doit contenir l’ensemble des formats/poids/tailles attendus (ex. “Votre image de profil doit être au format png ou jpg et ne pas excéder 100ko”). Il est intégré au label comme le Champs de saisie.

Personnalisation

  • Le composant reprend le comportement natif, il y a donc aucun personnalisation graphique possible.