shadcn.io is not affiliated with official shadcn/ui
Multi File Upload Block for Ark UI
A shared-drive upload list grouped into Uploading, Waiting and Finished with sticky group heads, an Upload 1, 2 or 3 at a time control, Pause all and a Finished group that folds into one summary row.
Installation
Overview
Show many uploads without a wall of bars, with this file upload panel for React with Ark UI. It is the upload list of Ferrywise, a shared drive for architecture teams. Rows are grouped by state in a fixed-height scroller with sticky group heads: Uploading, Waiting and Finished, each with a count. Finished folds into one summary row, "5 uploaded, 41 MB", that opens a Collapsible list. A Segment Group sets how many upload at a time (1, 2 or 3) and the files on air are worked out from that number and the order of the queue, so a bigger number promotes the next waiting file at once. Pause all holds every file at its typed progress, and a picked file joins the end of the queue. The header's one primary is Add files, a File Upload trigger. The panel's bands are ruled by Guides. It is built from File Upload, Progress, Collapsible, Segment Group, Shine Button, Button and Guides, with a CSS entrance only. For shared drives, asset managers and any list of uploads that outgrows a screen.
FAQ
How is it decided which files are uploading?
The first N files in the queue are on air, where N is the Segment Group's value, and the rest are waiting. Nothing is stored about it, so choosing 3 instead of 2, or removing a file, moves the next waiting file up at once. The status line says how many are uploading.
Is the progress real?
No. Each file's percentage is typed and nothing ticks. A waiting file that has some progress says "Waiting for a slot, 22% sent", and Pause all changes every on-air row to "Paused at" its percentage. Nothing is uploaded.
What is in Finished?
Five typed files that add up to 41 MB. The group head shows the count, and the summary row, which is the Collapsible's trigger, shows the total worked out from their sizes. Opening it lists the files inside the scroller, so the panel never changes height.
How do the sticky group heads work?
Each group is a section in one scroll region with its own head. The head sticks to the top while its rows scroll under it and gives way to the next group's head. The scroll region is focusable, so the keyboard can reach rows past its edge.
Does it read the files I add?
No. A picked file joins Waiting by name and size and is never opened; the queue holds 20. Nothing is uploaded or saved in this demo.
How do I wire it to a real uploader?
Hand your uploader the file ids in order and let it run N at a time with the same N, feed each file's percentage from its progress events, and move a file into the Finished list when its upload resolves. Keep the on-air files derived from the queue so the list and the uploader agree.