shadcn.io is not affiliated with official shadcn/ui
Chunked File Upload Block for Vue
A 2 GB file cut into numbered chunks laid out in up to four parallel streams, with chunk-size and stream controls, request counts, and Interrupt and Resume from the first chunk not done.
Installation
Overview
Explain how a resumable upload works, with this file upload panel for Vue with Ark UI. It is the resumable upload of Stitchwell, which moves survey data. A typed 2 GB point-cloud tile, 640 MB of it already sent, is cut into chunks and laid out as numbered blocks in up to four parallel streams. Each block shows its state by weight and in words: done is solid, sending is outlined, waiting is quiet and failed is hatched. Two Segment Group controls, chunk size (8, 16 or 32 MB) and streams (1 to 4), re-derive the lanes, the chunk and request counts and what a dropped chunk resends. Interrupt marks the chunks being sent as failed; Resume starts again at the first chunk that is not done, and the done ones stay. A legend names the four states, and the lanes scroll sideways on a phone. The panel is ruled by Guides. It is built from Segment Group, Shine Button, Button and Guides, with a CSS entrance only. For survey, media and backup tools that send big files over bad links.
FAQ
How are chunks assigned to streams?
Chunk numbers go round the streams in turn, so with three streams chunks 1, 4, 7 are in stream 1. Each lane shows the last two done chunks and what is ahead of them, ten blocks in all, and the chunk being sent in each lane is outlined. Unused streams keep a dashed placeholder, so the panel never changes height when you change the stream count.
What is typed and what is worked out?
The file, its 2 GB size and the 640 MB already sent are typed. The chunk count, how many are done, the requests still to go (one per chunk plus the final call) and what a dropped chunk resends all follow from the chunk size, and the blocks follow from that and the stream count. Choosing 8 MB gives 256 chunks with 80 done.
What do Interrupt and Resume do?
Interrupt marks the chunks currently being sent as failed, one per stream, and the status line says how many and that the done ones stay. Resume, whose label names the first chunk not done, such as "Resume from chunk 41", turns them back to sending. Both are always shown; the one that does not apply says so when pressed.
Does anything move?
No. States are typed and no bar advances; the only change is the one you make. Nothing loops.
How is it read by a screen reader?
Every block carries a hidden sentence such as "Chunk 41, sending", the visible number is hidden from assistive technology, and each lane is a list named by its stream. State is never carried by weight alone.
How do I wire it to a real uploader?
Slice the file with the same chunk size, send the chunks from a pool of the chosen number of workers, mark a chunk done when its request resolves and failed when it errors, and resume from the first chunk your server has not confirmed. Replace the typed sent size with the server's confirmed offset.