shadcn.io is not affiliated with official shadcn/ui
File Too Large Error Block for Vue
A full-screen 413 for a clip over the plan limit: a framed staircase of three plan limits with a marker for your file, four compression levels that move it and rewrite the verdict, and a real file picker that reads only name and size.
Installation
Overview
Tell people how much smaller their file has to be, and what that buys them, with this file too large page for Vue with Ark UI. It's the 413 screen of Reelcut, a video trimmer: a whole screen with the page's rails and one band across it, split in two. At the start, framed by Guides, a staircase of the three plan limits (Free 25 MB, Pro 100 MB, Business 1 GB, on a log scale) with a line for your file's size: a step the file fits is solid, one it doesn't is hatched. At the end, four compression levels in a Toggle Group (Original 187 MB, High quality 96 MB, Balanced 54 MB, Small 24 MB) move the line and rewrite the verdict, "Fits on Business" or "Fits on every plan", and how far the file is over the Free limit. The Shine Button Choose a smaller file opens the real file picker. It's built from Toggle Group, Shine Button and Guides, with a CSS entrance only. For any product with a per-file size limit.
FAQ
Does the page read the file I choose?
Only its name and its size, which the browser already knows, and never its contents. The line moves to that size and the verdict is recomputed, and the status line says "Nothing was uploaded." Choosing a level instead puts the group back in charge of the line. Your own upload code, not this page, should send the file anywhere.
Where do the compression sizes come from?
They are typed: the level names and the sizes they would give for this clip. A real page would estimate them from the file's length and your encoder presets, or tell the user the target size and let the trimmer produce it. The verdict is derived from whichever size is on the line and the typed plan limits, so changing a limit changes the sentences and the steps together.
Why is the staircase on a log scale?
Because 25 MB and 1 GB are 40 times apart: on a linear scale the first two steps would be slivers. The scale is logarithmic from 5 MB to the top plan's limit, and the caption says so. The drawing is hidden from screen readers; the verdict and the Free-limit line carry the same facts in text.
Is checking the size in the page enough?
No: it is a convenience. A visitor can bypass a browser check, so enforce the limit on your server and answer an oversized upload with a 413 and the limit, which is what this page explains.