Upload Interrupted Error Block for React

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.

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.

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.

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.

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.

The facts sit two by two, the cells stack, and the three buttons are pinned to the foot of the screen, with Resume upload across the full width, until you reach them.