File Uploader

File uploads. Free, MIT · Forms and input › Files and images

id, aria-describedby and aria-invalid (e.g. from FormField) go to the dropzone button.

Installation

npx valyro-cli@latest add file-uploader

npx shadcn@latest add https://valyro.xyz/r/file-uploader.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { FileUploader } from 'valyro-ui';

Prop	Type	Default
`value`	`FileItem[]`		File list, including rejected files (status `error`). Apps drive `status`/`progress` while uploading.
`defaultValue`	`FileItem[]`	`[]`	Initial `value` when uncontrolled.
`onValueChange`	`(items: FileItem[]) => void`		Called with the new `value` when it changes.
`onFilesAdded`	`(items: FileItem[]) => void`		Called with the newly accepted files — the place to start uploads.
`accept`	`string`		Same syntax as `<input accept>`: `image/*,.pdf`.
`maxSize`	`number`		Maximum size per file, in bytes.
`maxFiles`	`number`		Maximum number of accepted files; extra files are listed as rejected. Applies only with `multiple`.
`multiple`	`boolean`	`true`	Allow several files; when false, a new pick replaces the current file.
`disabled`	`boolean`	`false`	Disables the drop zone, the file picker and the remove buttons.
`invalid`	`boolean`	`false`	Danger border on the drop zone (`aria-invalid`).
`title`	`ReactNode`		Drop zone heading. Defaults to "Click to upload or drag and drop"; `labels.drop` replaces it while dragging.
`hint`	`ReactNode`		Text under the title. Defaults to a summary of `accept`, `maxSize` and `maxFiles`.
`locale`	`string`		Locale for file sizes and progress. Defaults to the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<FileUploaderLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Image Cropper — Image cropping: pan, zoom, rotate, aspect ratios and a round avatar
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard