Composant · Formulaire

FileUploader

Stable

Zone de dépôt et liste de fichiers avec statuts idle/uploading/complete/error, propulsée par les icônes Lucide `Upload`, `File`, `LoaderCircle`, `CircleCheck`, `CircleAlert` et `X`.

Exemples

Zone de dépôt vide

Pièces jointes

ou glissez-déposez vos fichiers ici

PDF, DOCX, PNG jusqu’à 5 MB.

Voir le code (Svelte)

<FileUploader
  label="Pièces jointes"
  helperText="PDF, DOCX, PNG jusqu’à 5 MB."
  multiple
  triggerLabel="Choisir des fichiers"
  dropzoneLabel="ou glissez-déposez vos fichiers ici"
/>

La sélection de fichiers (clic, glisser-déposer) est interactive sur la page réelle ; la démo est figée à vide.

Liste de fichiers avec statuts

Documents en cours

ou glissez-déposez ici

Suivi statique des statuts idle, uploading, complete et error.

brief.pdf 5 B
rapport-q1.docx 3 B
logo.svg 2 B
video.mov 4 B Format non supporté

Voir le code (Svelte)

<FileUploader
  label="Documents en cours"
  helperText="Suivi statique des statuts idle, uploading, complete et error."
  multiple
  triggerLabel="Ajouter des fichiers"
  dropzoneLabel="ou glissez-déposez ici"
  items={[{"file":{},"status":"idle"},{"file":{},"status":"uploading","progress":0.42},{"file":{},"status":"complete"},{"file":{},"status":"error","error":"Format non supporté"}]}
/>

Statuts visibles : idle, uploading, complete, error

Mode fichier unique

Avatar

ou glissez-déposez une image

Un seul fichier image, max 1 MB.

Voir le code (Svelte)

<FileUploader
  label="Avatar"
  helperText="Un seul fichier image, max 1 MB."
  accept="image/*"
  maxSizeBytes={1048576}
  triggerLabel="Choisir un fichier"
  dropzoneLabel="ou glissez-déposez une image"
/>

Mode fichier unique : `multiple` est faux et toute nouvelle sélection remplace la précédente.

État désactivé

Lecture seule

Champ verrouillé

Le composant reste rendu mais n’accepte plus d’entrée.

Voir le code (Svelte)

<FileUploader
  label="Lecture seule"
  helperText="Le composant reste rendu mais n’accepte plus d’entrée."
  disabled
  triggerLabel="Choisir un fichier"
  dropzoneLabel="Champ verrouillé"
/>

`disabled` propage l’état au bouton, au champ caché et désactive le drag-and-drop.

API

Prop	Type	Default
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`accept`	`string`	optionnel
`multiple`	`boolean`	`false`
`maxSizeBytes`	`number`	optionnel
`disabled`	`boolean`	`false`
`files`	`File[]` (`$bindable`)	`[]`
`items`	`FileUploadItem[]`	optionnel
`onfiles`	`(files: File[]) => void`	optionnel
`triggerLabel`	`string`	`"Choose file"` / `"Choose files"`
`dropzoneLabel`	`string`	`"Drag and drop files here"`
`removeLabel`	`(filename: string) => string`	`Remove ${filename}`
`maxSizeErrorLabel`	`(filename: string, maxSizeBytes: number) => string`	format par défaut
`id`	`string`	auto-généré
`class`	`string`	optionnel

Le composant rend un <div class="st-field st-fileUploader-field"> contenant une zone dropzone avec un bouton, un libellé, un champ <input type="file"> visuellement masqué et une icône Lucide Upload (size=18, strokeWidth=2). Quand items est fourni, le composant affiche la liste contrôlée avec une icône par statut : File pour idle, LoaderCircle animé pour uploading (prefers-reduced-motion respecté), CircleCheck pour complete et CircleAlert pour error. Sinon le composant rend la liste interne issue de la liaison files, avec File pour chaque entrée et CircleAlert lorsqu’un fichier dépasse maxSizeBytes. Le bouton de retrait par fichier utilise l’icône Lucide X (size=16) et alimente son aria-label via removeLabel. Les autres attributs HTML <div> sont transmis via spread.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground