Ajout de fichier - File upload

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.

                <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

Format de fichier non supporté

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

Ajout multiple

Afin de pouvoir sélectionner plusieurs fichiers, il faut ajouter l'attribut multiple à la balise input

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

                <!-- Désactivé-->

<div class="fr-upload-group fr-input-group--disabled ">
    <label class="fr-label" for="file-upload-disabled">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-disabled" name="file-upload-disabled" >
</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.
  • 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 contraintesutiliser plusieurs champs upload quand vous demandez à l’utilisateur des fichiers de différentes natures avec des contraintes spécifiques.
  • 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.