File Upload

A drag-and-drop zone with a featured cloud icon and copy, plus an upload queue showing file-type icons, progress and complete / uploading / failed states.

$bunx shadcn@latest add @nx-ui/file-upload
Registry item
Installs withbuttonfeatured-iconutils

Dropzone & queue

Drop files or click to upload; the demo simulates upload progress. Delete removes a row and retry restarts a failed one.

or drag and drop

CSV, PDF, XLSX or GeoJSON (max. 25 MB)

  • field-boundaries-north.csv

    82 KB

    Complete
    100%

  • soil-carbon-report-q2.pdf

    1 MB

    Uploading…
    40%

  • movement-manifest.xlsx

    500 KB

    Failed

Disabled dropzone

or drag and drop

Uploads are locked while the movement is under review

Readable file sizes

The exported getReadableFileSize helper formats bytes.

1 024 → 1 KB1 500 000 → 1 MB84 213 → 82 KB

API reference

Exported parts and their props, extracted from the component source.