File Upload

ProNew

A dropzone with an upload queue: per-file progress, cancel, retry and remove, image previews, validation messages and announcements.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/file-upload

onUpload is your transport. Report progress, honour the abort signal, resolve when the file is stored and throw to mark it as failed.

Use XMLHttpRequest (or a library that wraps it) when you need upload progress: fetch does not report it.

Prop	Type	Default	Description
`onUpload`	`UploadHandler`	-	Uploads one file. Without it, files are marked done at once.
`accept`	`string`	-	Native accept list, also enforced for dropped files.
`maxSize`	`number`	-	Largest file in bytes.
`maxFiles`	`number`	-	Most files the queue may hold.
`multiple`	`boolean`	`true`	Allow several files at once.
`concurrency`	`number`	`2`	Files that upload at the same time.
`defaultFiles`	`File[]`	-	Files to enqueue once on mount.
`onItemsChange`	`(items: UploadItem[]) => void`	-	Called whenever the queue changes.
`label`	`string`	`"Drop files here or browse"`	Main dropzone text.
`hint`	`string`	Summary of the limits	Secondary dropzone text.
`disabled`	`boolean`	`false`	Disable picking and dropping.

Also accepts all div props. UploadHandler is (file, { onProgress, signal }) => Promise<void>.

The dropzone is a real button: Enter or Space opens the file picker. The hidden file input sits next to it, so there is no nested control. The limits are linked as its description.
Every row has named actions, for example "Cancel upload of report.pdf", "Retry report.pdf" and "Remove report.pdf", and a named progress bar.
Added files, completions, failures, cancellations and rejected files are announced in a polite live region. Rejected files are also listed under the dropzone.
Rows slide in and the drop target lifts; with reduced motion rows only fade and the spinner stops.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/file-upload

onUpload is your transport. Report progress, honour the abort signal, resolve when the file is stored and throw to mark it as failed.

Use XMLHttpRequest (or a library that wraps it) when you need upload progress: fetch does not report it.

Prop	Type	Default	Description
`onUpload`	`UploadHandler`	-	Uploads one file. Without it, files are marked done at once.
`accept`	`string`	-	Native accept list, also enforced for dropped files.
`maxSize`	`number`	-	Largest file in bytes.
`maxFiles`	`number`	-	Most files the queue may hold.
`multiple`	`boolean`	`true`	Allow several files at once.
`concurrency`	`number`	`2`	Files that upload at the same time.
`defaultFiles`	`File[]`	-	Files to enqueue once on mount.
`onItemsChange`	`(items: UploadItem[]) => void`	-	Called whenever the queue changes.
`label`	`string`	`"Drop files here or browse"`	Main dropzone text.
`hint`	`string`	Summary of the limits	Secondary dropzone text.
`disabled`	`boolean`	`false`	Disable picking and dropping.

Also accepts all div props. UploadHandler is (file, { onProgress, signal }) => Promise<void>.

The dropzone is a real button: Enter or Space opens the file picker. The hidden file input sits next to it, so there is no nested control. The limits are linked as its description.
Every row has named actions, for example "Cancel upload of report.pdf", "Retry report.pdf" and "Remove report.pdf", and a named progress bar.
Added files, completions, failures, cancellations and rejected files are announced in a polite live region. Rejected files are also listed under the dropzone.
Rows slide in and the drop target lifts; with reduced motion rows only fade and the spinner stops.