shadcn.io is not affiliated with official shadcn/ui
Drag And Drop Zone File Upload Block for React
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.
Installation
Overview
Accept files anywhere on a page without drawing a drop box, with this file upload panel for React with Base UI. It is the hand-off page of Haulpost, where agencies send big files to clients. A drawn Q4 brief fills the panel's stage, and the whole stage is a File Upload drop zone in cover mode: nothing shows until a file is dragged over the page, then a full-bleed message says "Release to add to the Q4 brief" and the frame turns solid. The header's Browse files Shine Button is the other route, and the only one on a touch screen. Dropped files join an attachments list under the page as a row with a thin Progress bar that walks a short run of checkpoints, then reads "Added". Pause and Resume hold the run. The panel's bands are ruled by Guides. It is built from File Upload, Progress, Shine Button, Button and Guides, with a CSS entrance only. For hand-off pages, client portals and any page where the whole surface can take a file.
FAQ
How does the cover zone work?
The drop zone is absolutely positioned over the drawn page and has no border or ground of its own. While a file is dragged over it the file-upload root carries data-dragging, which fades in the message and turns the frame solid. Click is switched off on the zone (disableClick) so a stray click on the page opens nothing; the Browse files button opens the picker.
Is the progress bar real?
No, and the block says so. Nothing is sent. A dropped file walks a short typed list of checkpoints (22, 51, 79 and 100 percent) one step every 600 ms, with a single timer at a time that is cleared on pause, on a change and on unmount. With reduced motion set, the row jumps to Added at once. When the run ends the status line says "Finished in this demo. Nothing was sent."
Can I pause the run?
Yes. Pause is visible whenever a file is adding, holds the run at its checkpoint and turns into Resume. Remove cancels one file's row. The slot for the button keeps its width, so showing or hiding it moves nothing.
Does it read the files I drop?
No. The block keeps each file's name and size and nothing else. Files over 500 MB are refused with a polite line, and the brief holds eight attachments.
Related
- Pro
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.
- 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
No Uploads Empty State
Files and docsA transfer tool's uploads page as a whole screen: one big dashed drop zone with a drawn letterbox, the rules shown and enforced, and two lists, the files added and the files turned down with their reasons.
- 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.