` défini par la classe `fr-upload-group` et contenant : - Le libellé est un élément HTML de type ``, obligatoire : - Défini par la classe `fr-label`. - Il dispose de l'attribut `for` dont la valeur est égale à l'ID du champ de fichier. - Il doit inclure un texte explicatif, obligatoire, dans un élément HTML `` défini par la classe `fr-hint-text`. - Le champ de fichier est un élément HTML `` de type `file`, obligatoire : - Défini par la classe `fr-upload`. - Il dispose d'un attribut `id` obligatoire, pour être lié au libellé et d'un attribut `name` dont la valeur est libre. - Il peut disposer d'un attribut `aria-describedby` dont la valeur est égale à l'ID du groupe de messages. - Il peut disposer d'un attribut `multiple` dans le cas d'un composant ajout de fichiers multiples. - Le groupe de messages est un élément HTML `

` défini par la classe `fr-messages-group`. - Il dispose d'un attribut `id` pour être lié au champ de fichier et d'un attribut `aria-live="polite"`. - Le groupe de messages peut contenir un message d'erreur de type `

` défini par les classes `fr-message` et `fr-message--error`. **Exemple de structure HTML** ```HTML

Ajouter un fichier Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.

``` > [!NOTE] > L'ajout d'un attribut `accept` sur l'`` permet de restreindre les formats de fichiers sélectionnables par l'usager. Il est recommandé d'utiliser cet attribut pour indiquer les formats attendus (par exemple, `accept=".jpg,.png,.pdf"`). Cet attribut ne peut se substituer à la validation côté serveur, mais il améliore l'expérience utilisateur en filtrant les fichiers proposés. --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Form | Oui | | Upload | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### Variante d'ajout de fichier avec erreur Le composant Ajout de fichier peut être affiché en état d'erreur avec l'utilisation de la classe `fr-upload-group--error` et comporter dans le groupe de messages un message d'erreur. **Exemple de variante d'ajout de fichier avec erreur** ```HTML

Ajouter un fichier Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.

Format de fichier non supporté

``` #### Variante d'ajout de fichiers multiples Afin de pouvoir sélectionner plusieurs fichiers, il faut ajouter l'attribut `multiple` à la balise input **Exemple de variante d'ajout de fichiers multiples** ```HTML

Ajouter des fichiers Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.

``` #### Variante d'ajout de fichier désactivé Le composant Ajout de fichier peut être désactivé avec l'utilisation de la classe `fr-upload-group--disabled` et comporter dans le groupe de messages un message d'erreur. **Exemple de variante d'ajout de fichier désactivé** ```HTML

``` --- ### JavaScript Le composant Ajout de fichier **ne nécessite pas l'utilisation de JavaScript** pour son fonctionnement de base. --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+upload) ::dsfr-doc-changelog