shadcn.io is not affiliated with official shadcn/ui
With Progress File Upload Block for React
One file's transfer in a single card: a large percentage, a bar and four readouts (transferred, speed, time remaining, checkpoint), with Start, Pause, Resume and Cancel.
Installation
Overview
Show how far a long transfer has got, and let people hold it, with this file upload panel for React with Base UI. It is the recording sender of Longhaul, which moves field recordings from remote sites. A sample recording is ready to send in one card band: the file's name and size, the percentage at card size, a thin Progress bar and four readouts on shared hairlines (transferred, speed, time remaining and the checkpoint). Start walks a short run of checkpoints, Pause holds it, Resume carries on and Cancel returns to the File Upload drop zone, where a picked file takes the sample's place. The speed and the time remaining are worked out from the file's size, a sample speed and the checkpoint. The panel's bands are ruled by Guides. It is built from File Upload, Progress, Badge, Shine Button, Button and Guides, with a CSS bar and entrance only. For field-data tools, media sends and any single long transfer.
FAQ
Is the progress real?
No, and the block says so in its status line. Nothing is sent. Start walks five typed checkpoints (18, 41, 67, 88 and 100 percent), one step every 600 ms, with a single timer at a time that is cleared on pause, on cancel and on unmount. The bar moves with a CSS transition. When it ends the status line says "Finished in this demo. Nothing was sent."
Where do the speed and time remaining come from?
They are worked out, not measured. The block takes the file's size, a typed sample speed of 3.2 MB per second and the current checkpoint: bytes transferred is the size times the percentage, and the time remaining is what is left divided by the speed. A picked file uses its real size, so a 2 GB file shows a long time remaining. Replace the constant with your uploader's measured rate.
Can I pause and resume?
Yes. Pause is visible whenever the run is going and holds the checkpoint; the speed reads Paused and the primary button becomes Resume. Cancel returns to the drop zone and the status line says which file was cancelled. Focus follows the action you pressed, so the keyboard never loses its place.
What happens with reduced motion?
The run does not animate. Start jumps to the finished state at once and the status line says so, and the bar has no transition. The block loops nothing.