File upload - Téléversement de fichier

Composants permettant à l’utilisateur de sélectionner et envoyer un ou plusieurs fichiers.

Statut

Fonctionnel

Code source

Open link

Storybook

Open link

Dernière version de modification

2.20.0

Disponible depuis la version

1.7.0

Usage


                                                        
                                                        
                                                            <dsa-file-upload
                                                          id="file-upload"
                                                          label="Ajout de fichier"
                                                        >
                                                          <dsa-file-upload-item>file.txt</dsa-file-upload-item>
                                                          <dsa-file-upload-item>file.txt</dsa-file-upload-item>
                                                          <dsa-file-upload-item>file.txt</dsa-file-upload-item>
                                                        </dsa-file-upload>
                                                        
                                                        <script type="text/typescript">
                                                          import '@ds-autonomie/web-components/dist/components/file-upload/file-upload.js';
                                                          import '@ds-autonomie/web-components/dist/components/file-upload-item/file-upload-item.js'
                                                          import type { DSAFileUpload, DSAFileUploadItem } from '@ds-autonomie/web-components';
                                                        </script>

API

Attributs et propriétés Méthodes Slots Événements

Attributs et propriétés

Comment utiliser les attributs ? » Utilisation des webcomponents

Propriété attribut	Description	Type	Valeur par défaut
accept	Les types de fichiers acceptés (MDN).	string	''
buttonLabel button-label	Le libellé du bouton de sélection. Pour afficher du HTML, utilisez le slot button-label. Si le slot est vide et que l'attribut n'est pas renseigné, un libellé prédéfini sera affiché.	string	''
disabled	Désactive l'ajout de fichier	boolean	false
error	Indique si le composant doit être en état d'erreur	boolean	false
errorMessage error-message	Un message d'erreur qui est affiché lorsque l'attribut error est définie à true. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "\|".	string \| string[]	''
helpText help-text	Le help-text du champ. Pour afficher du HTML, utilisez le slot help-text	string	''
label	Le libellé du champ. Pour afficher du HTML, utilisez le slot label	string	''
required	Rend le champ obligatoire	boolean	false
multiple	Permet la selection de un ou plusieurs fichiers	boolean	false
appendFiles append-files	Utilisé avec multiple, conserve les fichiers déjà sélectionnés et ajoute les nouveaux fichiers sélectionnés. Par défaut, une nouvelle sélection remplace la précédente (comportement natif de l'input file).	boolean	false
description	Le libellé secondaire du champ. Pour afficher du HTML, utilisez le slot description	string	''
size	La taille du champ de saisie	small medium large	'medium'
type	Le type d'interface : soit un simple bouton, soit un bouton et une zone de drop	button drop	button
directory	Détermine si l'utilisateur peut sélectionner un dossier entier au lieu d'un ou plusieurs fichiers individuels. Lorsque cette fonctionnalité est activée, tous les fichiers contenus dans le dossier sélectionné ainsi que ceux présents dans ses sous-dossiers seront inclus dans la sélection. Chaque fichier importé inclura son chemin relatif (par rapport au dossier racine sélectionné). Ce chemin est accessible via la propriété webkitRelativePath. Le support de cette fonctionnalité dépend des navigateurs, vérifier la compatibilité sur https://caniuse.com/input-file-directory	boolean	false
fileSizeLimit file-size-limit	Limite de taille par fichier en octets. Les fichiers au delà de cette limite ne seront pas ajoutés et un message sera affiché à l'utilisateur.	number	-

Méthodes

Comment utiliser les méthodes ? » Utilisation des webcomponents

Nom	Description	Type
blur()	Enlève le focus du champ	() => void
focus()	Met le focus sur le champ	(options?: FocusOptions) => void FocusOptions
removeFile()	Supprime un des fichiers sélectionnés	(index: number) => void

Slots

Comment utiliser les slots ? » Utilisation des webcomponents

Nom	Description
(défaut)	Le contenu principale de l'ajout de fichier, généralement une liste de dsa-file-upload-item
button-label	Le slot du libellé du bouton d'ajout de fichier. Alternativement, vous pouvez utiliser l'attribut button-label. Si le slot est vide et que l'attribut n'est pas renseigné, un libellé prédéfini sera affiché.
label	Le slot du libellé de l'ajout de fichier. Alternativement, vous pouvez utiliser l'attribut label
description	Le slot du libellé secondaire de l'ajout de fichier. Alternativement, vous pouvez utiliser l'attribut description
help-text	Texte qui décrit comment utiliser le champ de saisie. Alternativement, vous pouvez utiliser l'attribut help-text

Événements

Comment utiliser les événements ? » Utilisation des webcomponents

Nom	Description
dsa-blur	Émis lorsque le champ perd le focus
dsa-focus	Émis lorsque le champ obtient le focus
dsa-file-upload	{{ files: File[] }} Émis lorsqu'un fichier est sélectionné. Il peut s'agir de plusieurs fichiers si multiple ou directory valent true.