Uppy Uploader

ProNew

An upload dashboard on Uppy's core engine: restrictions, a file list with progress, retry and remove, total progress, and your own upload function (fetch, S3, anything) instead of a bundled transport.

Customize

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

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/uppy-uploader

Usage

Uppy supplies the restriction rules, the file state and the retry bookkeeping. Its prebuilt Dashboard and its upload plugins (Tus, XHR, S3) are not installed: they bring their own CSS and markup, so this component renders with your design system and takes an upload function instead. Install a plugin and call uppy.use() yourself if you want one.

Props

Prop	Type	Default	Description
`upload`	`(file, { onProgress, signal }) => Promise<{ url? } \| void>`	-	Sends one file. Reject to fail it.
`restrictions`	Uppy restrictions	none	`maxFileSize`, `minFileSize`, `maxTotalFileSize`, `maxNumberOfFiles`, `minNumberOfFiles`, `allowedFileTypes`.
`autoProceed`	`boolean`	`false`	Upload as soon as files are added.
`concurrency`	`number`	`3`	Uploads at once.
`onComplete`	`({ successful, failed }) => void`	-	After a batch.

Accessibility

"Browse files" is a real button that opens the hidden file input, so the whole flow works without drag and drop.
The file list is a labelled list; each row has a named Retry and Cancel or Remove button, and a progress bar named after the file. Restriction failures and upload errors are role="alert".
The summary line ("2 of 3 uploaded (60%)") is a polite live region.
The drag-over state changes the prompt text as well as the border.

Testing

The component ships with a Testing Library test (uppy-uploader.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/uppy-uploader

Usage

Props

Prop	Type	Default	Description
`upload`	`(file, { onProgress, signal }) => Promise<{ url? } \| void>`	-	Sends one file. Reject to fail it.
`restrictions`	Uppy restrictions	none	`maxFileSize`, `minFileSize`, `maxTotalFileSize`, `maxNumberOfFiles`, `minNumberOfFiles`, `allowedFileTypes`.
`autoProceed`	`boolean`	`false`	Upload as soon as files are added.
`concurrency`	`number`	`3`	Uploads at once.
`onComplete`	`({ successful, failed }) => void`	-	After a batch.

Accessibility

"Browse files" is a real button that opens the hidden file input, so the whole flow works without drag and drop.
The file list is a labelled list; each row has a named Retry and Cancel or Remove button, and a progress bar named after the file. Restriction failures and upload errors are role="alert".
The summary line ("2 of 3 uploaded (60%)") is a polite live region.
The drag-over state changes the prompt text as well as the border.

Testing

The component ships with a Testing Library test (uppy-uploader.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.