shadcn.io is not affiliated with official shadcn/ui
Storage Quota File Upload Block for Solid
A 250 MB plan drawn as a stacked bar by type, where dropped files are staged as a hatched projection with their real sizes, warn near the limit, say how far over they are, and cannot be added past it.
Installation
Overview
See what a batch would cost before you add it, with this storage quota panel for Solid with Ark UI. It is the storage page of Atticful, an archive for a family's photos, on a Free plan of 250 MB with 212 MB used. A stacked bar splits the plan by photos, videos, documents and other, and beside it the plan's facts sit in a side cell. Files you drop into the File Upload zone are staged, not counted, and the bar draws them as a hatched projection with their real sizes: "229.3 MB of 250 MB", 92% of the plan. Near the limit one line says so in words; past it the line reads "Does not fit: 22 MB over" and the Add button, a Shine Button, answers with that reason instead of adding. A file over the plan's 50 MB per-file limit is refused by the zone itself and named in the status line. Add moves the staged files into the bar, Clear staged empties the list, and each row has its own Remove. The panel is ruled by Guides. For photo and document archives, free tiers and any upload that must respect a quota.
FAQ
What is the hatched part of the bar?
It is what the staged files would add. It is drawn at their real byte sizes against the whole plan, so it grows and shrinks as you stage and remove files, and the figure above the bar and the line under it say the same numbers in words. Staged files are not counted in the solid segments or in "used now" until you press Add. If the staged files do not fit, the hatching fills to the end of the bar and the line says how far over they are.
Is the per-file limit real?
Yes. The 50 MB limit is the drop zone's maxFileSize, so the picker and the zone refuse bigger files, and the status line names them ("reunion.mov is over 50 MB and was not staged"). The plan's 250 MB is checked by the block itself against the staged total.
How are files sorted into photos, videos and documents?
By extension alone: common image extensions count as photos, video extensions as videos, and PDF, Word and text files as documents; everything else is other. The block never opens a file, so a renamed file lands where its name says.
Why can't I add when it does not fit?
Add stays pressable so a keyboard user can find out why: it explains that the batch is over the plan and moves focus to the last staged file's Remove button. Remove a file and the projection recalculates at once; See larger plans only says that plans are not connected in this demo.
What stays local, and how do I wire it?
Everything. The used bytes by type, the two staged files and the plan are typed at module scope; Add changes the bar in this page only and a reload restores it. To wire it, read HELD and LIMIT from your billing or storage API, send staged files to your upload endpoint on Add, and enforce the quota on the server too: the browser's check is a courtesy.