Upload Queue Panel React component
An upload manager for many files: drag in or browse real files, two uploads at a time with the rest queued, per-file progress with time left, pause, resume, cancel and retry, a total bar with speed, filters for in progress, done and failed, clear done, and a minimize-to-pill mode with a progress ring.
About the Upload Queue Panel component
Upload Queue Panel manages many uploads at once. Files go into a queue, a couple upload at a time, and every row shows its own progress and time left while a bar at the top shows the total.
People stay in control: pause, resume or cancel any file, retry the ones that failed (one by one or all at once), filter to what matters and clear finished uploads. Minimize the panel and it becomes a small pill with a progress ring that keeps counting.
When to use it
Use it in media libraries, document management, asset uploads for e-commerce, and anywhere people send many or large files.
For a single file field in a form, use the file upload element instead.
Installation
Add the Upload Queue Panel component to your project with the shadcn CLI. It lands in components/upload-queue-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/upload-queue-panelOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<UploadQueuePanel /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | { id: string; name: string; size: number; uploaded: number; status: Status; failAt?: number; error?: string }[] | ITEMS |
| concurrency | number | 2 |
| onFilesAdded | (files: File[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- items{ id: string; name: string; size: number; uploaded: number; status: Status; failAt?: number; error?: string }[]Default: ITEMS
- concurrencynumberDefault: 2
- onFilesAdded(files: File[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Upload Queue Panel FAQ
- Does it upload anything?
- The demo simulates progress so the block works on its own. Real files can be dropped or picked and are passed to onFilesAdded. Drive each row's uploaded and status from your uploader's progress events.
- How many files upload at once?
- concurrency sets how many run in parallel (2 by default). The rest wait as queued and start automatically when a slot frees up.
- What happens when an upload fails?
- The row turns red with the error and a retry button; retrying puts it back in the queue. With two or more failures, Retry all appears at the bottom.
- Can people keep working while files upload?
- Yes. Minimize turns the panel into a floating pill with an overall progress ring; clicking it opens the full queue again.
- Is it accessible?
- Every row has a labelled progress bar, actions are labelled with the file name, filters are tabs, the headline updates politely, and the drop zone also has a browse button.
