iconiq
—Open GitHub

File Upload

Drag-and-drop file uploader with click-to-browse fallback, queued file rows, image previews, and animated removal.

Open in

Drop or click to upload

Images, videos, audio, or documents

Browse

    Installation

    npx shadcn@latest add @iconiq/file-upload

    Props

    FileUpload

    9 props

    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
    Defaulttrue
    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
    Defaultfalse
    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.

    Notes

    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

    3 props

    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.

    Notes

    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.