File Upload

File upload surface with previews and queue states.

Installation

npx shadcn@latest add @iconiq/file-upload

Props

FileUpload

Drag-and-drop uploader with an internal queue, hidden file input, keyboard-triggerable drop zone, and callback hooks for parent integrations.

acceptstring

Optional accept string passed to the hidden file input and also enforced for dropped files, including MIME types like image/* and extensions like .pdf.

multipleboolean

Default true

Allows selecting or dropping multiple files. When set to false, the next selection replaces the existing queue.

maxFilesnumber

Caps the queue length. New files are prepended, and anything beyond the limit is trimmed from the end.

disabledboolean

Default false

Disables click, drag, keyboard activation, and the hidden file input without changing the component structure.

namestring

Passes a form field name through to the hidden file input for form integrations.

classNamestring

Adds classes to the outer wrapper without changing the component internals.

onFilesChange(files: File[]) => void

Called when files are added or removed from the queue. It does not fire on every progress tick.

onFileRemove(file: File, nextFiles: File[]) => void

Called after a queued file is removed. The second argument contains the remaining files in queue order.

onUploadComplete(files: File[]) => void

Called once the current queue reaches 100% completion for every item.

The drop zone is keyboard accessible and opens the hidden file input on Enter or Space.

Both drag-and-drop and click-to-browse flow through the same queue logic, so accept filtering and max file limits stay consistent.

Built-in behavior

The component still owns its progress visuals and preview lifecycle, even when you attach callbacks from parent code.

progress statebuilt-in

Each added file starts in an uploading state and advances through the built-in simulated progress loop until it reaches done.

image previewsbuilt-in

Image files receive object URL previews and render as thumbnails; non-image files fall back to a file icon surface.

remove actionbuilt-in

Each queued file can be removed individually from the trailing action button, with preview URLs revoked immediately.

Preview object URLs are cleaned up on remove and during component unmount.

Each queue item id is built from the file name, file size, and a random suffix to reduce collisions between repeated uploads.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.