Basic

Usage

Below is a compact end‑to‑end example using multiple files, a custom trigger, a simple preview, and a hidden input for form submit.

Code

custom-example

import {
  FileUploader,
  FileUploaderPreview,
  FileUploaderTrigger,
} from "@/components/ui/file-uploader.tsx";

const upload = async (file: File) => {
  return { url: URL.createObjectURL(file) };
};

export default function BasicExample() {
  return (
    <FileUploader upload={upload}>
      <FileUploaderPreview className={"size-10 my-2 rounded-lg"} />
      <FileUploaderTrigger className="rounded-lg border px-3 py-2">
        Select Image
      </FileUploaderTrigger>
    </FileUploader>
  );
}

Preview