# File upload blocks for shadcn/ui

> 73 file upload blocks from public shadcn/ui registries, free and paid, with live previews, source code and install commands.

- Page, with live previews: https://shadcn.exchange/blocks/file-upload
- 73 blocks, 70 free and 3 paid, from 13 registries.
- Search them as JSON: `https://shadcn.exchange/api/catalog?kind=blocks&category=file-upload&q=<words>`. Add `price=free` for the ones you can install, and `offset=<n>` for the next 24.
- With the shadcn CLI, which finds free blocks by their words: `npx shadcn@latest search @shadcn-exchange -q file-upload`

Each block's page answers in Markdown, source included, at its address with `.md` on the end. [The whole site for agents](https://shadcn.exchange/llms.txt).

## Free file upload blocks

All 70 blocks, best first. Each installs with the command beside it, in a project that has shadcn/ui set up.

- [Image Gallery Uploader by @7ovr](https://shadcn.exchange/r/7ovr/file-upload-4): Image gallery uploader with a responsive thumbnail grid, a cover badge on the first photo, hover remove buttons, an upload tile, and an image count. `npx shadcn@latest add https://shadcn.exchange/r/7ovr/file-upload-4.json`
- [Hourglass Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/hourglass-upload): Sand runs through an hourglass as files upload, with the time left up front. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/hourglass-upload.json`
- [Avatar Photo Uploader by @7ovr](https://shadcn.exchange/r/7ovr/file-upload-5): Avatar uploader with a circular image preview, change and remove buttons, and a format hint, previewing the picked file via an object URL. `npx shadcn@latest add https://shadcn.exchange/r/7ovr/file-upload-5.json`
- [Inline File Field by @7ovr](https://shadcn.exchange/r/7ovr/file-upload-2): Compact inline file upload form field with a bordered Choose File row and one attachment showing the selected file name, size, and remove action. `npx shadcn@latest add https://shadcn.exchange/r/7ovr/file-upload-2.json`
- [Dropzone With Upload Progress by @7ovr](https://shadcn.exchange/r/7ovr/file-upload-1): File upload card with a drag-and-drop dropzone and an attachment list showing a spinner per file while uploading and a check when finished. `npx shadcn@latest add https://shadcn.exchange/r/7ovr/file-upload-1.json`
- [Uploader With Validation Toasts by @7ovr](https://shadcn.exchange/r/7ovr/file-upload-3): Drag-and-drop file uploader enforcing size and type validation, with uploading, done, and error attachment states, toasts, and per-file remove. `npx shadcn@latest add https://shadcn.exchange/r/7ovr/file-upload-3.json`
- [File upload 01 by @shadcn-studio](https://shadcn.exchange/r/shadcn-studio/file-upload-01): Card form with a "Studio Name" text input, a single file input (file picker), and action buttons to upload or cancel. `npx shadcn@latest add https://shadcn.exchange/r/shadcn-studio/file-upload-01.json`
- [File Upload Multi-File Dropzone by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-03): A file upload multi-file dropzone block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-03.json`
- [Zeno Progress: Upload List by @keyframeui](https://shadcn.exchange/r/keyframeui/zeno-progress-upload-demo): Three files, each with its own bar, finishing at different times. The video's virus scan takes much longer, so you can watch its ruler go many decimals deep while the others are done. `npx shadcn@latest add https://shadcn.exchange/r/keyframeui/zeno-progress-upload-demo.json`
- [PDF Dropzone by @extend](https://shadcn.exchange/r/extend/pdf-dropzone): A PDF-only upload dropzone that opens the dropped file in the shared PDF viewer. `npx shadcn@latest add https://shadcn.exchange/r/extend/pdf-dropzone.json`
- [Upload Terminal by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-terminal): Uploads printed as a CLI log with ASCII progress bars, speed and results. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-terminal.json`
- [Drop Files by @spectrumui](https://shadcn.exchange/r/spectrumui/upload-empty): A drop zone with real drag handling and per-file upload meters. `npx shadcn@latest add https://shadcn.exchange/r/spectrumui/upload-empty.json`
- [Dropbox Upload by @uui](https://shadcn.exchange/r/uui/dropbox-upload) `npx shadcn@latest add https://shadcn.exchange/r/uui/dropbox-upload.json`
- [MediaDrop S3 Direct Upload by @mediadrop](https://shadcn.exchange/r/mediadrop/s3-direct-upload): Direct-to-S3 upload block using a presigned PUT URL you supply per file, built on react-mediadrop's xhr-upload transport. `npx shadcn@latest add https://shadcn.exchange/r/mediadrop/s3-direct-upload.json`
- [Dropzone by @gridcn](https://shadcn.exchange/r/gridcn/dropzone): Dependency-free file dropzone: drag and drop or click to choose, with accept, size, and count checks and a compact variant. Used by the data-grid-io import dialog. `npx shadcn@latest add https://shadcn.exchange/r/gridcn/dropzone.json`
- [UploadThing Dropzone by @elements](https://shadcn.exchange/r/elements/uploadthing-dropzone): Drag and drop file upload zone with progress tracking and file management. Self-contained component that works with any upload backend. `npx shadcn@latest add https://shadcn.exchange/r/elements/uploadthing-dropzone.json`
- [File upload by @quill](https://shadcn.exchange/r/quill/file-upload): An asset-upload card with a drag-and-drop dropzone and a progress-tracked upload queue. `npx shadcn@latest add https://shadcn.exchange/r/quill/file-upload.json`
- [File Upload with Preview by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-01): A file upload with preview block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-01.json`
- [Battery Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/battery-upload): Charges cell by cell for backups, with a bolt that pulses while it charges. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/battery-upload.json`
- [File Upload Drag & Drop by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-04): A file upload drag & drop block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-04.json`
- [Polaroid Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/polaroid-upload): Photos drop onto the table like polaroids with a spring and a tilt. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/polaroid-upload.json`
- [File Upload with Progress by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-05): A file upload with progress block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-05.json`
- [Document Checklist by @uploadcn](https://shadcn.exchange/r/uploadcn/document-checklist): A checklist of required documents (claims, onboarding, visas) ticked off as they upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/document-checklist.json`
- [File Upload Simple by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-02): A file upload simple block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-02.json`
- [Upload Popover by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-popover): Attachments behind a toolbar button with a count and a progress ring. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-popover.json`
- [File Upload with Status Sections by @blocks-so](https://shadcn.exchange/r/blocks-so/file-upload-06): A file upload with status sections block. `npx shadcn@latest add https://shadcn.exchange/r/blocks-so/file-upload-06.json`
- [Logo Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/logo-upload): A settings card for a workspace logo with light and dark previews. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/logo-upload.json`
- [Flip Card Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/flip-card-upload): A single-file card that flips to show the uploaded file. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/flip-card-upload.json`
- [Stamp Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/stamp-upload): Documents land on a pile and get stamped the moment they're received. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/stamp-upload.json`
- [Vinyl Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/vinyl-upload): A record that spins while tracks upload, with a tonearm that follows progress. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/vinyl-upload.json`
- [Envelope Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/envelope-upload): Files slide into an envelope; the flap closes and a seal stamps on when sent. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/envelope-upload.json`
- [CSV Import by @uploadcn](https://shadcn.exchange/r/uploadcn/csv-import): Bulk import from a spreadsheet, with column checks and a preview before upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/csv-import.json`
- [Upload Stack by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-stack): Uploads stacked like notifications that fan out on hover or focus. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-stack.json`
- [Document Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/document-upload): Document, PDF and résumé uploads with type badges. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/document-upload.json`
- [Upload Tabs by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-tabs): One queue fed from three sources: the device, a public link or the camera. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-tabs.json`
- [Property Photos by @uploadcn](https://shadcn.exchange/r/uploadcn/property-photos): Real-estate listing photos tagged by room, with coverage and a recommended count. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/property-photos.json`
- [Video Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/video-upload): Video uploads with inline playback, duration limits and resumable multipart for large files. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/video-upload.json`
- [Audio Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/audio-upload): Audio uploads with an inline player per file. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/audio-upload.json`
- [Image Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/image-upload): An image grid with optional cropping and client-side compression. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/image-upload.json`
- [Avatar Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/avatar-upload): A profile photo uploader with round cropping and a progress ring. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/avatar-upload.json`
- [Cloud Dropzone by @uploadcn](https://shadcn.exchange/r/uploadcn/cloud-dropzone): Particles rise into a cloud that fills with the upload progress. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/cloud-dropzone.json`
- [Upload Odometer by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-odometer): Files, megabytes and percent on rolling odometer digits. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-odometer.json`
- [Liquid Dropzone by @uploadcn](https://shadcn.exchange/r/uploadcn/liquid-dropzone): A dropzone that fills up like a glass with the combined upload progress. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/liquid-dropzone.json`
- [Image Metadata by @uploadcn](https://shadcn.exchange/r/uploadcn/image-metadata): Images upload in the background while people write alt text and captions. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/image-metadata.json`
- [Delivery Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/delivery-upload): A truck carries files from the warehouse to their destination as they upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/delivery-upload.json`
- [Product Media Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/product-media-upload): Storefront product photos: a cover image and a gallery you reorder by drag or keyboard. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/product-media-upload.json`
- [Upload Button by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-button): A single button that uploads and reports progress inline. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-button.json`
- [Folder Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/folder-upload): A folder that opens on hover and drag; dropped files fly in and the front shows progress. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/folder-upload.json`
- [Morphing Upload Button by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-morph-button): A button that morphs into its own progress bar, then a check mark. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-morph-button.json`
- [Progress Ring Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/progress-ring-upload): One ring for the whole batch: a counting percentage, per-file ticks and a self-drawing check. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/progress-ring-upload.json`
- [Gallery Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/gallery-upload): A photo gallery uploader that resizes images to WebP before upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/gallery-upload.json`
- [Upload Dock by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-dock): A macOS-style dock of uploaded files that magnifies under the cursor. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-dock.json`
- [Magnetic Dropzone by @uploadcn](https://shadcn.exchange/r/uploadcn/magnetic-dropzone): A dropzone whose target leans towards the pointer and follows dragged files. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/magnetic-dropzone.json`
- [Upload Dialog by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-dialog): Pick files, review them, then upload in a modal that confirms before closing mid-upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-dialog.json`
- [Image Reveal Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/image-reveal-upload): A single-image uploader where the photo develops behind a scan line as it uploads. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/image-reveal-upload.json`
- [Job Application Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/job-application-upload): Resume, cover letter and portfolio for a careers page. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/job-application-upload.json`
- [File Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/file-upload): A dropzone with a full upload queue, progress summary and batch actions. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/file-upload.json`
- [Rocket Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/rocket-upload): A rocket that climbs with the upload and lifts off when it's done. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/rocket-upload.json`
- [Orbit Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/orbit-upload): Files orbit the center while uploading and land in a row when done. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/orbit-upload.json`
- [Upload Table by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-table): The upload queue as a data table, with a drop overlay over the whole table. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-table.json`
- [Scanner Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/scanner-upload): A document scanner frame with corner guides and a scan beam, for IDs and receipts. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/scanner-upload.json`
- [Camera Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/camera-upload): Take photos with the device camera and upload them as you go, with a file picker fallback. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/camera-upload.json`
- [Shopping Bag Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/shopping-bag-upload): Product photos drop into a shopping bag that fills as they upload. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/shopping-bag-upload.json`
- [Paper Plane Button by @uploadcn](https://shadcn.exchange/r/uploadcn/paper-plane-button): A send button that fills with progress, then the paper plane takes off. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/paper-plane-button.json`
- [Upload Island by @uploadcn](https://shadcn.exchange/r/uploadcn/upload-island): A Dynamic Island-style pill that morphs between idle, progress and done, and expands into the file list on hover. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/upload-island.json`
- [Ripple Dropzone by @uploadcn](https://shadcn.exchange/r/uploadcn/ripple-dropzone): A dropzone whose rings ripple while dragging, with a burst on drop. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/ripple-dropzone.json`
- [Identity Verification by @uploadcn](https://shadcn.exchange/r/uploadcn/identity-verification): KYC-style ID front, back and selfie with a progress rail and submit gate. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/identity-verification.json`
- [Typewriter Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/typewriter-upload): Types each file name onto a page that rolls out of the machine. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/typewriter-upload.json`
- [Blueprint Upload by @uploadcn](https://shadcn.exchange/r/uploadcn/blueprint-upload): A drawing traces itself as CAD files upload, then the title block is approved. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/blueprint-upload.json`
- [Animated Upload Queue by @uploadcn](https://shadcn.exchange/r/uploadcn/animated-upload-queue): A queue whose rows expand in, collapse out, count up and draw a check. `npx shadcn@latest add https://shadcn.exchange/r/uploadcn/animated-upload-queue.json`

## Paid file upload blocks

All 3 blocks, best first. Their registries sell these: each installs from its registry once bought.

- [File Upload 3 – Grouped upload states with clear status separation by @shadcncraft](https://shadcn.exchange/r/shadcncraft/file-upload-3): A structured file upload layout that separates completed and in-progress uploads into clear sections. Uses lightweight headers to group states, making it easy to scan what’s finished versus what’s still uploading. Supports drag-and-drop in…
- [File Upload 2 – Simplified upload list with minimal metadata by @shadcncraft](https://shadcn.exchange/r/shadcncraft/file-upload-2): A streamlined file upload layout that pairs a drag-and-drop zone with a clean, minimal upload list. Each file item focuses on status and progress only, reducing visual noise while still supporting multiple simultaneous uploads, cancellatio…
- [File Upload 1 – Drag-and-drop upload with inline progress by @shadcncraft](https://shadcn.exchange/r/shadcncraft/file-upload-1): A compact file upload layout with a prominent drag-and-drop zone and clear fallback action. Uploaded files are listed inline with filename, size, status, and progress indicators, supporting multiple concurrent uploads. Designed to give imm…

## Registries with the most file upload blocks

- [@uploadcn](https://shadcn.exchange/r/uploadcn): 50 blocks, all free
- [@blocks-so](https://shadcn.exchange/r/blocks-so): 6 blocks, all free
- [@7ovr](https://shadcn.exchange/r/7ovr): 5 blocks, all free
- [@shadcncraft](https://shadcn.exchange/r/shadcncraft): 3 blocks, all paid
- [@elements](https://shadcn.exchange/r/elements): 1 block, free
- [@extend](https://shadcn.exchange/r/extend): 1 block, free
- [@gridcn](https://shadcn.exchange/r/gridcn): 1 block, free
- [@keyframeui](https://shadcn.exchange/r/keyframeui): 1 block, free
- [@mediadrop](https://shadcn.exchange/r/mediadrop): 1 block, free
- [@quill](https://shadcn.exchange/r/quill): 1 block, free
- [@shadcn-studio](https://shadcn.exchange/r/shadcn-studio): 1 block, free
- [@spectrumui](https://shadcn.exchange/r/spectrumui): 1 block, free
- [@uui](https://shadcn.exchange/r/uui): 1 block, free