shadcn.io is not affiliated with official shadcn/ui
Upload Interrupted Error Block for Svelte
A full-screen page for an upload that was cut off: the facts, a speed select, and two decision cells, Resume and Start over, each with what it sends and how long that takes, worked out from typed sizes, and a bounded CSS fill for whichever you choose.
Installation
Overview
Show what resuming saves before asking someone to choose, with this upload interrupted page for Svelte with Ark UI. It's the screen Tesselshare, a large-file transfer service, shows when an upload was cut off: a whole screen with the page's rails and one band across it, a centred heading and one framed figure on shared hairlines made with Guides. First the facts (started 10:23 UTC, interrupted 10:28, 432 MB kept, 687 MB in all), then a Native Select for your upload speed (1, 5 or 20 MB/s), then two decision cells. Resume sends the remaining 255 MB and takes 4 min 15 s at 1 MB/s; Start over sends all 687 MB and takes 11 min 27 s; a bar on one scale shows what each keeps and what each sends. The Shine Button Resume upload fills the bar from what is kept, Start over, an outline Button, empties it and fills it from the beginning, and Cancel puts the demo back. It's built from Native Select, Shine Button, Button and Guides, with a CSS entrance only. For any product that sends large files.
FAQ
How are the times worked out?
From the typed sizes and the speed you choose: 687 MB in all, 432 MB kept, so 255 MB to go. Each duration is the megabytes divided by the speed, rounded up to whole seconds and written as minutes and seconds, so at 5 MB/s resuming takes 51 s and starting over 2 min 18 s. The saving in the Resume cell is the time to send the part you would keep. The percentage is rounded from the same two numbers, so the text, the bar and the cells always agree.
Does anything get uploaded?
No. A press fills a bar with CSS in a few seconds (a moment under reduced motion) and the polite status line says it was done in this demo and that nothing left your device. The fill is only as long as the part it sends, so starting over is visibly longer than resuming. In your app, call your uploader from the handler and drive the bar from its real progress.
Why compare them before choosing?
Resuming is not always possible or better: some services can't continue a part, and some files changed while they were sending. Showing both with their real cost makes the usual choice obvious and the unusual one deliberate. Start over says plainly that it throws away the part already there.
What does Cancel do?
It stops a fill that is running and puts the demo back to the interrupted state with 432 MB kept, so a visitor can run it again. When there is nothing to put back it says so. It is always on the page and always pressable, so it never appears or disappears under a finger.
What do the bars mean?
All three are on the whole file's scale. In the Resume cell the lighter part is what the service already holds and the solid part is what would be sent; in Start over the whole bar is solid, because everything is sent again. The long bar under the cells shows what the service holds now and fills as you resume or start over. They are drawings, hidden from screen readers; the cells and the status line say the same in words.