shadcn.io is not affiliated with official shadcn/ui
Queue Manager File Upload Block for React
A transfer window with a priority select on every row that re-sorts the queue, per-row Pause and Resume, Retry on a failed row, Pause all, Clear completed and a count of active, waiting, paused and failed.
Installation
Overview
Let people decide what goes first, with this file upload window for React with Base UI. It is the transfer window of Quaywise, which keeps a media archive in step. The top bar holds the title and the one primary, Add files, a File Upload trigger. A toolbar under it has Pause all, Clear completed and a live count (active, waiting, paused, failed). Each row of the queue has a thin Progress bar, its state in words and a glyph, a priority Native Select (High, Normal, Low), Pause or Resume, and Remove; a failed row offers Retry. The queue re-sorts by priority, stable by arrival, only when you change a priority. Two transfers run at a time, and which two is worked out from the order, so raising a waiting file's priority puts it on air. The window keeps a fixed height, and only the list scrolls. The frame is ruled by Guides. It is built from File Upload, Native Select, Progress, Button, Shine Button and Guides, with a CSS entrance only. For media archives, backup tools and any app with a transfer list.
FAQ
How does priority work?
Each row's select sets High, Normal or Low. The list is sorted by that rank and then by arrival, so two files of the same priority keep the order they came in. The list re-sorts only when you change a select, never by itself and never under the pointer, and focus stays on the select you used even though its row moves.
Why do some rows say Waiting for a slot?
Two transfers run at a time. The block takes the first two queued rows in priority order as active and the rest as waiting, so the states are worked out, not stored. Pausing an active row frees a slot and the next waiting row takes it at once; raising a waiting row's priority does the same and pushes the last active one back.
What do Pause all and Clear completed do?
Pause all pauses every queued row and then reads Resume all. Clear completed removes the finished rows. Both are always shown; with nothing to act on they stay in place and the status line says so, instead of disappearing.
Does anything move?
No. Progress is typed on each row and no bar advances, so a paused row is a typed state and Resume only changes the word. The status bar names what changed after each action, such as "interview-reel-03.mov paused."