FileUploader
Drag-and-drop file upload zone with file list and status indicators.
Category: inputs · WCAG 2.2-AA · upload, file, drop, drag, input, form
States
- idle
- dragover
- uploading
- complete
- error
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
files | UploaderFile[] | [] | Controlled file list |
onFilesAdded | (files: File[]) => void | — | Called with accepted files |
onRemove | (id: string) => void | — | Called when a file is removed |
multiple | boolean | false | Allow multiple files |
accept | string | — | Accepted file types (MIME or extension) |
maxSize | number | — | Maximum file size in bytes |
onRejected | (files: File[], reason: 'size' | 'type') => void | — | Called with rejected files |
label | string | — | Field label |
hint | string | — | Hint text below the drop zone |
labels | FileUploaderLabels | — | i18n label overrides |
disabled | boolean | false | Disables the upload zone |
Design tokens
--cascivo-color-accent--cascivo-color-accent-subtle--cascivo-color-success--cascivo-color-danger--cascivo-color-danger-subtle
When to use
- Letting users attach one or more files via click-to-browse or drag-and-drop
- Showing per-file upload progress and status (uploading, complete, error) in a list
- Enforcing client-side accept/maxSize constraints with a callback for rejected files
When not to use
- A single short text value — use Input
- Choosing from a fixed set of options rather than supplying a file — use Select or MultiSelect
How to build an accessible FileUploader in React →
Examples
Basic
Single file upload zone
<FileUploader onFilesAdded={console.log} />Multiple
Accept multiple files
<FileUploader multiple onFilesAdded={console.log} />With files
Shows file list
<FileUploader files={[{ id:'1', name:'report.pdf', size:102400, status:'complete' }]} />