A
Accueil > Components > DragAndDropFile

DragAndDropFile

Zone de dépôt de fichiers par glisser-déposer ou clic.TagsuiInformationsWeb onlyExemples3StylesDisponibles
Default
Document
Choisir un fichierAucun fichier choisi.
Image uniquement
Choisir un fichierAucun fichier choisi.
export const Default = () => (
<Box display="flex" flexDirection="column" gap={24}>
<DragAndDropFile label="Document" value={null} onChange={() => {}} />
<DragAndDropFile label="Image uniquement" type="image/*" value={null} onChange={() => {}} />
</Box>
);
Multiple
Documents (plusieurs)
Choisir un fichierAucun fichier choisi.
export const Multiple = () => (
<DragAndDropFile label="Documents (plusieurs)" multiple value={null} onChange={() => {}} />
);
WithError
Document
Choisir un fichierAucun fichier choisi.
Format non supporté
export const WithError = () => (
<DragAndDropFile label="Document" error="Format non supporté" value={null} onChange={() => {}} />
);
Alveole UI Kit — v1.8.4