Input-file (Champ de fichier)

Le composant « champ de fichier » est un composant de formulaire qui permet aux utilisateurs de sélectionner un / des fichier(s) à envoyer sur un serveur.

Usage

• Ce composant est utile dans les formulaires qui nécessitent la récupération de fichiers des utilisateurs (photos, CV…).
• C'est un composant natif qui permet de choisir le(s) fichier(s) sur son terminal et de voir, après coup, le nom du fichier s’il n’y en a qu’un ou le nombre de fichiers s’il sont plus nombreux.
• Ce composant n’envoie pas lui-même le(s) fichier(s) sur le serveur, ce travail doit être géré lors de la validation du formulaire.
• Il est possible d’ajouter le(s) fichier(s) soit en utilisant le bouton qui ouvre l’interface du gestionnaire de fichiers du terminal, soit en glissant/déposant des fichiers directement sur le composant.

Bonnes pratiques

• Bien que ce composant permette de filtrer en amont les types de fichier que l’on peut téléverser, ce filtrage ne garanti le format de ces fichiers. Il est donc important de faire cette vérification sur le serveur.

Style & code

Cas standard

SipaUI ne modifie pas en profondeur ce composant standard, il redesign juste le bouton affiché par le navigateur. Comme c’est celui-ci qui gère l’affichage de ce bouton, son contenu textuel varie en fonction du navigateur utilisé. SuipaUI n’a pas la main sur ce point.

L’input file est limité par défaut à un seul fichier, mais l’attribut multiple="multiple" autorise l’ajout de plusieurs fichiers. Dans ce cas, sur certains navigateurs le texte du bouton s’adapte.

<form>
    <label for="input1">Pour un fichier</label>
    <input id="input1" name="input1" type="file" />
    <label for="input2" class="su-margin-top-m">Pour plusieurs fichiers</label>
    <input id="input2" name="input2" type="file" multiple="multiple" />
</form>

Filtrage des formats de fichier

Il est possible de n’autoriser que certain format de fichier en se basant sur leur extension, leur type MIME… avec l’attribut accept="". Un fichier pouvant avoir un format selon différents types, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.

Identifiants de fichiers :

• une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : .jpg, .pdf ou .doc.
• un type MIME valide.
• la chaîne de caractères audio/* qui indique « n'importe quel fichier audio », video/* qui indique « n'importe quel fichier vidéo » ou image/* qui indique « n'importe quel fichier image ».

<form>
    <label for="input1">Joignez une image JPEG ou PNG</label>
    <input id="input1" name="input1" type="file" accept="image/jpeg, image/png" />
</form>

Erreur

<form>
    <div class="su-error">
        <label for="input1">Joignez une image (10 Mo max.)</label>
        <input id="input1" name="input1" type="file" accept="image/jpeg, image/png" />
        <div class="su-error-message">Taille maximale dépassée.</div>
    </div>
</form>

Sur fond sombre

Le composant s’adapte à la classe su-negative.

<form class="su-negative">
    <label for="input1">Label</label>
    <input id="input1" name="input1" type="file" />
</form>