File Upload

A file upload built on Ark UI File Upload. The default <FileUpload /> includes a label, dashed dropzone, trigger, and a list of accepted files with size and delete actions. Pass Ark root props such as accept, maxFiles, or maxFileSize to constrain selection.

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

export default function Example() {
  return <FileUpload label="Attachments" />;
}

Installation

liminal add file-upload

Usage

Optional label and placeholder customize the dropzone copy. Forward validation props to the root: for example maxFiles={3}, accept={["image/png", "image/jpeg"]}, or maxFileSize.

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

export default function Example() {
  return (
    <FileUpload
      label="Images (max 3)"
      placeholder="Drop images here or browse"
      maxFiles={3}
      accept={["image/png", "image/jpeg", "image/webp"]}
    />
  );
}

Examples

Compound API

Re-exported parts include FileUploadRoot, FileUploadLabel, FileUploadDropzone, FileUploadTrigger, FileUploadItemGroup, FileUploadItem, FileUploadItemName, FileUploadItemSizeText, FileUploadItemDeleteTrigger, FileUploadHiddenInput, and FileUploadClearTrigger. Use FileUpload.Context from @ark-ui/react/file-upload to read acceptedFiles or rejectedFiles and build custom lists (as the convenience <FileUpload /> does).

import {
  FileUploadRoot,
  FileUploadLabel,
  FileUploadDropzone,
  FileUploadTrigger,
  FileUploadHiddenInput,
} from "@/components/ui/file-upload";

export default function Example() {
  return (
    <FileUploadRoot maxFiles={5}>
      <FileUploadLabel>Files</FileUploadLabel>
      <FileUploadDropzone>
        <p className="text-sm text-muted-foreground">Drop files or use the trigger</p>
        <FileUploadTrigger>Choose files</FileUploadTrigger>
      </FileUploadDropzone>
      <FileUploadHiddenInput />
    </FileUploadRoot>
  );
}

API

Also accepts Ark FileUpload.Root props (accept, maxFiles, maxFileSize, minFileSize, disabled, onFileAccept, etc.). See Ark File Upload.