merisia-file-upload
<merisia-file-upload>Champ de téléversement accessible avec zone de glisser-déposer, navigation clavier correcte (Tab pour focus, Entrée/Espace pour ouvrir le sélecteur) et liste de fichiers sélectionnés.
Démos
Basique
<merisia-file-upload
label="Pièce jointe"
name="attachment"
hint="Formats acceptés : PDF, Word. Taille maximale : 5 Mo."
></merisia-file-upload>Plusieurs fichiers, type restreint
<merisia-file-upload
label="Photos"
name="photos"
accept="image/*"
multiple
hint="Images JPG, PNG ou WebP."
></merisia-file-upload>Textes localisés (i18n)
<merisia-file-upload
label="Attachment"
name="attachment-en"
choose-text="Choose a file"
drag-text="or drag and drop here"
file-list-label="Selected files"
remove-text="Remove"
remove-aria-prefix="Remove file"
></merisia-file-upload>Lecture seule (sans fichier)
<merisia-file-upload label="Pièce jointe" name="attachment" readonly></merisia-file-upload>Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaFileUpload (propres) | ||||
| label | label | string | '' | Texte du libellé du champ |
| hint | hint | string | '' | Aide contextuelle (formats acceptés, taille max…) |
| errors | – | string[] | [] | Liste de messages d'erreur (propriété JS uniquement) |
| errorPrefix | error-prefix | string | 'Erreur :' | Préfixe des messages d'erreur (i18n, visuellement masqué) |
| accept | accept | string | '' |
Types de fichiers acceptés (.pdf,.jpg, image/*…)
|
| multiple | multiple | boolean | false | Autorise la sélection de plusieurs fichiers |
| chooseText | choose-text | string | 'Choisir un fichier' | Texte du bouton de sélection (i18n) |
| dragText | drag-text | string | 'ou glisser-déposer ici' | Texte de glisser-déposer (i18n) |
| fileListLabel | file-list-label | string | 'Fichiers sélectionnés' | Aria-label de la liste de fichiers (i18n) |
| removeText | remove-text | string | 'Supprimer' | Libellé du bouton de suppression (i18n) |
| removeAriaPrefix | remove-aria-prefix | string | 'Supprimer le fichier' | Préfixe de l'aria-label du bouton de suppression (i18n) |
| MerisiaFormElement (hérités) | ||||
| name | name | string | '' | Nom du champ dans le formulaire |
| required | required | boolean | false | Rend le téléversement obligatoire |
| disabled | disabled | boolean | false | Désactive la zone de téléversement |
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique du composant |
| lang | lang | string | 'fr' | Langue utilisée pour le formatage des tailles de fichiers |
| width | width | number | – |
Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)
|
Ressources externes
- Téléversement de fichiers — GOV.UK Design System (en anglais)
- Téléversement de fichiers — Système de design du Canada
Import
import '@merisia-inc/merisia-components/file-upload';