Upload List with Progress and Controls

ProNew

Choose or drop files and see each one in a list with its own progress bar, size, status in words, Cancel while uploading, Retry after a failure, Remove when done, and a summary line. Use this when people upload several files and need to trust what is happening.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

maxSize1

concurrency2

Guide and examples

When to use it

A multi-file upload where each file can succeed or fail on its own.

Do not use it when: For a single file with a preview, use an image or file field. For huge files use the resumable upload.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`upload`	`Uploader`	simulated	`(file, { onProgress, signal }) => Promise`. Use `xhrUploader(url)` for real progress.
`accept`	`string`	any	The `accept` attribute syntax.
`maxSize`	`number`	10 MB	Bytes per file.
`concurrency`	`number`	`2`	Uploads at once.

Accessibility

A button opens the file picker (drag and drop is the shortcut). The files are a labelled list; each row has the name, size and status as words ("Uploading", "Failed"), a named progress bar and buttons named after the file.
The summary line is a polite status ("2 of 3 uploaded, 1 need attention"); each failure is an alert with the reason. Rejected files stay in the list with their reason instead of vanishing.
Cancel is available while uploading or waiting and the request is really aborted; Remove is hidden while a file is in flight.

Testing

The pattern ships with a Testing Library test (upload-list-with-progress.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A multi-file upload where each file can succeed or fail on its own.

Do not use it when: For a single file with a preview, use an image or file field. For huge files use the resumable upload.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`upload`	`Uploader`	simulated	`(file, { onProgress, signal }) => Promise`. Use `xhrUploader(url)` for real progress.
`accept`	`string`	any	The `accept` attribute syntax.
`maxSize`	`number`	10 MB	Bytes per file.
`concurrency`	`number`	`2`	Uploads at once.

Accessibility

A button opens the file picker (drag and drop is the shortcut). The files are a labelled list; each row has the name, size and status as words ("Uploading", "Failed"), a named progress bar and buttons named after the file.
The summary line is a polite status ("2 of 3 uploaded, 1 need attention"); each failure is an alert with the reason. Rejected files stay in the list with their reason instead of vanishing.
Cancel is available while uploading or waiting and the request is really aborted; Remove is hidden while a file is in flight.

Testing

The pattern ships with a Testing Library test (upload-list-with-progress.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.