Interactive Dropzone
Drag & drop files here
or click to browse
1<UploadDropzone />Upload Progress States
PDF
2024-my-portfolio.pdf
20%3.2 MB of 12.8 MB
PDF
2024-my-portfolio.pdf
60%9.6 MB of 12.8 MB
PDF
2024-my-portfolio.pdf
Completed
12.8 MB of 12.8 MB
1<UploadCard filename="2024-my-portfolio.pdf" progress={20} currentSize="3.2 MB" totalSize="12.8 MB" />2<UploadCard filename="2024-my-portfolio.pdf" progress={60} currentSize="9.6 MB" totalSize="12.8 MB" />3<UploadCard filename="2024-my-portfolio.pdf" progress={100} currentSize="12.8 MB" totalSize="12.8 MB" status="completed" />Compact Dark Style
presentation.pdf
45%
design-assets.zip
100%
1<UploadCardCompact filename="presentation.pdf" progress={45} />2<UploadCardCompact filename="design-assets.zip" progress={100} status="completed" />Multiple Files
PDF
project-proposal.pdf
85%4.2 MB of 5.0 MB
PDF
team-photo.png
30%1.5 MB of 5.0 MB
PDF
meeting-notes.docx
Completed
0.8 MB of 0.8 MB
1<UploadCard filename="document.pdf" progress={85} ... />2<UploadCard filename="image.png" progress={30} ... />Installation
npx zeroui@latest add upload-cardProps
| name | type | default | description |
|---|---|---|---|
| filename | string | - | - |
| progress | number (0-100) | 0 | - |
| currentSize | string | - | - |
| totalSize | string | - | - |
| status | "uploading" | "completed" | "error" | "uploading" | - |
| fileType | "pdf" | "doc" | "image" | "video" | "pdf" | - |