shadcn.io is not affiliated with official shadcn/ui
Size Limit File Upload Block for React
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.
Installation
Overview
Make the size rules visible before anyone hits a wall, with this file upload panel for React with Base UI. It is the artwork upload of Pressbridge, an online print shop. Two cells share a hairline: Per file holds a Slider from 5 to 100 MB that sets the largest single file, and the File Upload drop zone's real maxFileSize follows it; Total holds a Progress meter with a tick at 80% that fills with what you add against the order's 100 MB, with words for how much room is left. A file over the cap is listed as "Too large: 9 MB over the 25 MB limit" and not counted; a file that would pass the total is listed as "No room" and not counted. The states are worked out from the list and the cap, so moving the slider re-checks every file at once. The panel is ruled by Guides. It is built from File Upload, Slider, Progress, Badge and Guides, with a CSS entrance only. For print shops, asset uploads and any form with a size policy.
FAQ
Is the per-file cap real?
Yes. The slider's value, in megabytes, becomes the drop zone's maxFileSize, so the picker and the zone refuse bigger files. Refused files are still listed, flagged "Too large" with how far over they are, from the zone's reject handler. The default is 25 MB.
What is worked out and what is typed?
Four files are typed to start, with real byte sizes. Everything else is worked out from the list and the cap: whether each file is counted, the total, the percentage, the "3 of 4 counted" line and the words under the meter. Moving the slider re-checks every file, including the typed ones, and the status line says how many are too large.
What happens near the total?
At 80% the words change to "Nearly full" with the room remaining, and at 100% to "The order is full." A file that would take the sum past 100 MB is listed as "No room" and is not counted. Remove a file and the others are checked again in the order they arrived.
Does it read my files?
No. The block keeps only each file's name and size, and says so in a polite status line from load. Nothing is uploaded or saved.
Related
- Pro
A format allow-list (PDF, PNG, JPG, DOCX, CSV, ZIP) that builds the drop zone's accept, checking each file by extension and by reported type, with an Accepted and a Refused list and the reason for each refusal.
- 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
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 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.