Components

File Upload

new

A dropzone with a file list, previews, upload progress and validation.

Installation

npx shadcn@latest add @blank/file-upload

Usage

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

<FileUpload multiple accept="image/*" maxSize={5 * 1024 * 1024}>
  <FileUploadDropzone>Drop images here</FileUploadDropzone>
  <FileUploadList />
</FileUpload>

For a single file in a form row, reach for Input File instead. File Upload is the larger surface: a dropzone, a list with previews, and upload state per file.

Files are checked against onFileValidate, accept, maxSize and maxFiles in that order; each rejected file reaches onFileReject with a sentence you can show in FieldError. The dropzone is a button — click, Enter or Space opens the picker — and also takes drops and pasted files. Keep other interactive elements out of it; put a FileUploadTrigger beside it instead.

Examples

Upload progress

onUpload receives the accepted files and three callbacks. Report progress and the item shows a bar; report an error and it turns red with the message.

or drop them here

API Reference

FileUpload

Prop	Type	Default
`value` / `defaultValue`	`File[]`	`[]`
`onValueChange`	`(files: File[]) => void`	—
`accept`	`string`	—
`maxSize`	`number` (bytes)	—
`maxFiles`	`number`	—
`multiple`	`boolean`	`false`
`onFileValidate`	`(file: File) => string \| null \| undefined`	—
`onFileReject`	`(file: File, message: string) => void`	—
`onAccept`	`(files: File[]) => void`	—
`onUpload`	`(files, { onProgress, onSuccess, onError }) => Promise<void> \| void`	—
`disabled` / `required`	`boolean`	`false`
`name`	`string`	—

Parts

Part	Notes
`FileUploadDropzone`	Click, keyboard, drop and paste target. `data-dragging`, `data-invalid`.
`FileUploadTrigger`	Opens the picker; `asChild` for a `Button`.
`FileUploadList`	Renders every file; pass `(file) => ReactNode` to compose items.
`FileUploadItem`	One file. `data-status`: `idle`, `uploading`, `success`, `error`.
`FileUploadItemPreview`	Thumbnail for images, an icon by type otherwise.
`FileUploadItemMetadata`	Name, size, progress or error.
`FileUploadItemProgress`	A `Progress` bar while uploading.
`FileUploadItemDelete`	Removes the file.
`FileUploadClear`	Removes every file; hidden when the list is empty.