File Uploader
A bold red dropzone for any file, with gallery tiles and progress after upload.
elite micro interactionsfileuploaderframer motiontabler icons react
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | UploadFile[] | - | Controlled file list. |
defaultValue | UploadFile[] | - | Seed files for uncontrolled usage. |
onChange | (files: UploadFile[]) => void | - | Fired whenever the file list changes. |
onUpload | (file: File, onProgress: (percent: number) => void) => Promise<void> | - | Custom upload handler. When omitted, progress is simulated locally. |
onRemove | (file: UploadFile) => void | - | Fired when a file is removed from the list. |
accept | string | - | HTML accept string. Omit to allow all file types. |
maxFiles | number | 8 | Maximum number of files. Extra picks are ignored. |
maxSize | number | 10485760 | Maximum bytes per file. Oversized files land as errors. |
buttonLabel | string | "Choose files" | Label inside the solid choose button. |
description | string | "or drop files here" | Supporting line under the button. |
color | string | "#DC2F2F" | Dropzone accent color. Hover/drag uses a darker mix. |
multiple | boolean | true | Allow selecting multiple files. |
disabled | boolean | false | Disable interaction. |