shadcn.io is not affiliated with official shadcn/ui
Folding Dropzone File Upload Block for Radix UI
A project folder's drop zone that folds into a slim Add more strip over its file list as files arrive, with a running total against 25 MB, Remove on each row and Clear all.
Installation
Overview
Let people add files to a shared folder without ever losing the drop target, with this file upload panel for React with Radix UI. It is the project-files zone of Cairnbox, shared folders for small design studios. Empty, the panel is a roomy File Upload drop zone with a Shine Button to choose files. Once files arrive, the same zone folds into a slim strip with an Add more button over their list, and a band under the list totals them against the folder's 25 MB ("3 files, 4.2 MB of 25 MB") with a thin Progress meter and a Clear all Button. Each row has a file-type glyph, the name, the size and a Remove button that names its file. A file that would pass the total, or one that is already in the folder, is refused and a polite line says why. The frame's bands are ruled by Guides. It is built from File Upload, Progress, Button, Shine Button and Guides, with a CSS entrance only. For shared folders, client portals, asset managers and any app that collects files into a list.
FAQ
Does it read the files I choose?
No. The drop zone hands the block each accepted file and the block keeps only its name and its size. The glyph on a row comes from the file's extension. Nothing is uploaded, previewed from the file or stored, and the block says so in a polite status line that is there from load.
How does the zone fold into a strip?
It is one drop zone, not two. When the list has a file the same element changes its layout from a centred column to a single row with the Add more button at its end, so the zone stays a drop target and the button keeps keyboard focus. Clear all brings the roomy zone back and puts focus on Choose files.
How is the 25 MB total worked out?
From the rows. The total is the sum of the real byte sizes of the files in the list, the meter is that sum against TOTAL_BYTES, and the words ("3 files, 4.2 MB of 25 MB") come from the same numbers. A file that would take the sum past the limit is not added and the status line names it. Change TOTAL_BYTES and the hint text for your own limit.
Where does focus go when I remove a file?
To the next row's Remove button, or the one before it when the last row goes, and to the Add button when the list is empty. Each Remove button is named for its file ("Remove brand-guide.pdf") and is 44 px on a phone.
What stays local, and how do I wire it to a server?
Everything. Picking, dropping, Remove and Clear all only change the block's own list, which is gone on reload. To upload for real, send each file from accepted to your storage, put its progress into the row, and replace the list with what your server reports.