Multi-File Queue

Stacked upload list with done, uploading, and failed rows each ending in the matching status icon.

brand-guide.pdf4.2 MB
hero-video.mov
logo-dark.svg18 KB
pricing.xlsx2.1 MB

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

Import & use
import { Upload13 } from "@/components/beste/piece/upload13";

<Upload13
  files={[
    {
      "filename": "brand-guide.pdf",
      "size": "4.2 MB",
      "state": "done"
    },
    {
      "filename": "hero-video.mov",
      "size": "312 MB",
      "state": "uploading",
      "percent": 62
    },
    {
      "filename": "logo-dark.svg",
      "size": "18 KB",
      "state": "done"
    },
    {
      "filename": "pricing.xlsx",
      "size": "2.1 MB",
      "state": "failed"
    }
  ]}
/>

More Upload pieces

View all Upload
Organize uploads
Brand assets124
Press kit 202638
Product screenshots212
Archive · 202596

Folder List

upload27

Reorderable folder list with a drag handle, amber folder icon, and an item-count column on the right.

+20
Recent uploads24 items

Upload Stack

upload20

Compact upload summary with four overlapping thumbnails, a +N overflow tile, and a total item count.

raw-footage-reel.mp458%
Chunked upload · 16 MB parts9 / 16 done

Chunked Upload

upload17

Parallel chunk uploader visualizing 16 part tiles tinted by done, uploading, or pending states.

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.

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.

brand-guidelines.pdf12.4 MB · 68%

File Upload Card

upload1

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