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

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`	—	Visible field label rendered above the drop zone; it also names the control.
`hint`	`string`	—	Hint text below the drop zone
`labels`	`FileUploaderLabels`	—	i18n label overrides
`disabled`	`boolean`	`false`	Disables the upload zone
`ariaLabel`	`string`	—	Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is visible; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this.

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

A single short text value — use Input
Choosing from a fixed set of options rather than supplying a file — use Select or MultiSelect

Single file upload zone

<FileUploader onFilesAdded={console.log} />

Accept multiple files

<FileUploader multiple onFilesAdded={console.log} />

Shows file list

<FileUploader files={[{ id:'1', name:'report.pdf', size:102400, status:'complete' }]} />

Form — Place the uploader inside a Form when files are part of a larger submission
Input — Use a plain text Input when capturing a value rather than a file