shadcn.io is not affiliated with official shadcn/ui
Folding Dropzone File Upload Block for React
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 Base 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.
Related
- Pro
A per-file size cap set with a slider (5 to 100 MB) and a total meter with an 80% tick; files over the cap or past the total are listed with the reason and not counted.
- Pro
A drawn project brief that is itself the drop zone: nothing shows until a file is dragged over it, then a full-bleed message appears, and dropped files join an attachments list with a short bar.
- Pro
An illustrated empty state whose drawn folder is the drop zone: a pick closes the folder and lists the file, with working Add files, Paste a link and New folder shortcuts.
- Pro
Upload Queue Preview Gallery
Select and actA file drop zone that lists every file you pick or drop (name and size, never opened) beside a queue of four seeded files in their states, with Retry, Remove and a Send button.
- Pro
A deep inset drop zone whose 1 px edge lights up where the pointer is and glows evenly on focus, over a tray of attachment rows with Remove and Clear tray.
- Pro
A phone-first uploader drawn in a 360 px device frame: a large Choose files target, a Take photo camera shortcut, compact file chips and a bottom drawer quick look with Remove.