File Upload

Keyboard-accessible drop zone with validation, progress, retry, cancellation, and transport-neutral uploads.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

pnpm dlx aq-ui@alpha add file-upload

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

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

<FileUpload />

Keyboard-accessible drop zone with validation, progress, retry, cancellation, and transport-neutral uploads.

const FileUpload = React.forwardRef<React.ComponentRef<"div">, FileUploadProps>(…)

Type contract for FileUploadEntry.

type FileUploadEntry = ControllerFileUploadEntry

Type contract for FileUploadProps.

interface FileUploadProps extends Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" >

Name	Type	Default
`value?`	`File[]`	`—`
`defaultValue?`	`File[]`	`[]`
`onValueChange?`	`(files: File[]) => void`	`—`
`onUploadComplete?`	`(assets: UploadedAsset[]) => void`	`—`
`uploadAdapter?`	`EditorAssetUploadAdapter`	`—`
`autoUpload?`	`boolean`	`true`
`accept?`	`string`	`—`
`multiple?`	`boolean`	`true`
`maxFiles?`	`number`	`Number.POSITIVE_INFINITY`
`maxSize?`	`number`	`Number.POSITIVE_INFINITY`
`disabled?`	`boolean`	`—`
`onReject?`	`(rejections: FileUploadRejection[]) => void`	`—`
`name?`	`string`	`—`
`label?`	`React.ReactNode`	`"Drop files here or choose files"`
`description?`	`React.ReactNode`	`—`

Type contract for UploadStatus.

type UploadStatus = FileUploadStatus

button, progress, upload, use-file-upload, utils

lucide-react@^1.31.0