Dropzone
Permet d’ajouter des fichiers via glisser-déposer.
Description
La dropzone est un composant qui permet à l’utilisateur de téléverser un ou plusieurs fichiers en les déposant directement dans une zone définie de l’interface. Elle peut également proposer une alternative par sélection manuelle via l’explorateur de fichiers.
Web
iOS/Android
Plateformes
Anatomie
- Zone de dépôt
- Lien vers l'explorateur de fichiers
- Règles de dépôt : liste des formats et du poids des fichiers acceptés
- Fichiers : affiche les fichiers sélectionnés ou déposés, parfois avec des actions (supprimer, renommer...).
Usage
Quand l'utiliser ?
Lorsqu'un utilisateur a besoin (ou souhaite) uploader un ou plusieurs fichiers.
Do's and don'ts
-
Do
Soyez clair sur le nombre de fichiers qui sont possibles d’uploader, leur poids, leur format et les messages d’erreur.
-
Don't
Être vague sur les requis en termes de nombre de fichiers, leur poids, leurs formats. Écrire des messages d’erreurs trop vagues.
-
Do
Toujours afficher le fichier qui vient d'être uploadé, avec la possibilité de le supprimer.
Anatomie
- Label : décrit le besoin du champs
- Required (optionnel) : indique si le champ est requis
- Tooltip (optionnel) : aide l'utilisateur à mieux comprendre le label
- Zone de dépôt / Fichier uploadé
- Bouton de suppression : permet de supprimer un fichier uploadé
- Règles de dépôt : décrit le format et le poids du fichier accepté
- Erreur : indique à l'utilisateur la raison du refus de son fichier
Usage
Quand l'utiliser ?
Lorsqu'un utilisateur a besoin (ou souhaite) uploader un ou plusieurs fichiers.
Do's and don'ts
-
Do
Soyez clair sur le nombre de fichiers qui sont possibles d’uploader, leur poids, leur format et les messages d’erreur.
-
Don't
Être vague sur les requis en termes de nombre de fichiers, leur poids, leurs formats. Écrire des messages d’erreurs trop vagues.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.