iconiq.

Registry Component

File Upload

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

Live Playground

Drop files onto the surface, click to browse, then remove queued items to inspect the built-in preview and list behavior.

Drop or click to upload

Images, videos, audio, or documents

Browse

    Install And Iterate

    Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

    Install

    Build with v0

    Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

    Usage

    Use the uploader as-is for the built-in queue UI, then hook into the provided callbacks when you need to track selected files, limit uploads, or hand completed files to your own form or API flow.

    tsx
    "use client";

import { useState } from "react";
import { FileUpload } from "@/components/ui/file-upload";

export function AssetUploader() {
  const [queuedFiles, setQueuedFiles] = useState<File[]>([]);
  const [readyFiles, setReadyFiles] = useState<File[]>([]);

  return (
    <div className="w-full max-w-xl space-y-4">
      <FileUpload
        accept="image/*,.pdf"
        maxFiles={4}
        name="assets"
        onFilesChange={setQueuedFiles}
        onUploadComplete={setReadyFiles}
      />

      <div className="space-y-1 text-sm text-muted-foreground">
        <p>{queuedFiles.length} file(s) in the queue</p>
        <p>{readyFiles.length} file(s) ready to submit</p>
      </div>
    </div>
  );
}

    API Details

    Each item below covers the documented props and the behavior that matters during implementation.