Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Size Limit File Upload Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make the size rules visible before anyone hits a wall, with this file upload panel for Svelte with Ark 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.

How do I use the slider from the keyboard?

Focus the thumb and use the arrow keys, Home and End; each step is 5 MB. Its value is spoken in megabytes. In a right-to-left language the slider keeps its direction so the numbers read the same way, and the meter stays left to right.

How do I wire it to my limits?

Change MIN_CAP, MAX_CAP and TOTAL_BYTES, and enforce the same numbers on your server: the browser's limit is a courtesy, not a guarantee.

All 100 file upload blocks