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.

1 Structure
2 Règles d’utilisation
- 2.1 Usage
- 2.2 Accessibilité
- 2.3 Personnalisation

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.

<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>

<!-- 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>

<!-- 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.