Data/File Uploader

FileUploader

Drag-and-drop file upload zone with file type validation, size limits, and preview thumbnails. Works with any upload backend.

import { FileUploader } from "@animui/ui"

Basic

Click or drag files into the drop zone.

Drop files here or click to upload

Accepted: image/png,image/jpeg,image/webp,application/pdf · Max size: 5.0 MB

Upload avatar

PNG, JPG up to 2MB

Prop	Type	Default	Description
`onFiles`	`(files: File[]) => void`	—	Called with accepted File objects when the user drops or selects files.
`accept`	`string`	—	Comma-separated MIME types or extensions. e.g. 'image/*' or 'image/png,application/pdf'
`maxSize`	`number`	—	Maximum file size in bytes. Oversized files are rejected with an error message.
`multiple`	`boolean`	`true`	Allow multiple file selection.
`maxFiles`	`number`	—	Maximum number of files that can be in the list at once.
`value`	`UploadedFile[]`	`[]`	Controlled list of uploaded file objects (id, file, status, progress, preview).
`onRemove`	`(id: string) => void`	—	Called when the user clicks the remove button on a file.
`label`	`string`	`"Drop files here or click to upload"`	Primary label shown inside the drop zone.
`description`	`string`	—	Secondary line of helper text. Auto-generated from accept/maxSize if omitted.
`disabled`	`boolean`	`false`	Disables the drop zone and file input.
`className`	`string`	—	Additional classes on the wrapper.