File Upload

Selects and validates files through a native picker or drag and drop.

@rivetui/file-upload

Preview

Explore each composition interactively, then open its code in the same context.

Accept multiple files with shared type, count, and size constraints.

Note

Set disabled on FileUpload to disable the dropzone and file controls together.

Drop files here or click to browseSelect one or more files from your device.PNG / JPG / JPEG / PDF / JSON · 4 files · Up to 5 MB

Fit file selection into a standard control row without losing drag and drop.

Choose fileCSV / JSON · 1 file · Up to 2 MB

Omit multiple when the workflow accepts exactly one file.

Drop files here or click to browseSelect a file from your device.IMAGE/* · 1 file · Up to 5 MB

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/file-upload

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`value`	`File[]`	`—`
`defaultValue`	`File[]`	`[]`
`onValueChange`	`(files: File[]) => void`	`—`
`accept`	`string`	`—`
`multiple`	`boolean`	`false`
`maxFiles`	`number`	`1 / ∞ when multiple`
`maxSize`	`number`	`—`
`disabled`	`boolean`	`false`
`onFileReject`	`(rejection: FileUploadRejection) => void`	`—`

Prop	Type	Default
`size`	`"sm" \| "md"`	`"md"`
`className`	`string`	`—`

Use size="sm" for a button-height picker. The compact layout keeps click and drag-and-drop behavior and shows the selected filename inline.