Resume Upload

Interrupted-upload card with an amber state, half-filled bar, resume byte offset, and a Resume button.

design-archive.zipInterrupted 4 minutes ago

42%

Resume from 132 MB

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Upload21 } from "@/components/beste/piece/upload21";

<Upload21
  filename="design-archive.zip"
  interruptedAt="Interrupted 4 minutes ago"
  percent={42}
  resumeFrom="Resume from 132 MB"
/>

More Upload pieces

View all Upload

keynote-rehearsal.mp4Paused · 212 MB left

Upload Paused

upload16

Paused-upload row with an amber Resume button and a static amber progress track matching the state.

Uploading 24 files9.2 MB/s overall

74%

18Done

3Uploading

3Queued

Batch Summary

upload19

Aggregate upload card with a total-files header, a single sky bar, and a done, uploading, queued tally.

project-handoff.zip42 files · 248 MBCompressed from 612 MB · 59% smaller

Archive Bundle

upload30

Zip bundle card with an amber archive tile, file count, compressed savings line, and a Download button.

brand-guidelines.pdf12.4 MB · 68%

File Upload Card

upload1

File tile with icon, name, size, and an inline progress bar.

0:42

launch-teaser.mp454 MB

Video Preview

upload24

Uploaded-video card with a play button over a dark thumb, duration badge, and a filename footer.

campaign-edit-01.mov184 MB of 312 MB · 12.4 MB/s

59%10s left

Upload Progress

upload12

Single-file upload row with size counter, live speed, pause and cancel controls, and a gradient bar.