Components

File dropzone

A drop target with a liquid surface: it swells when a file is dragged over, a pool of light follows the file, and a drop sends a splash ring out from where it landed.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { FileDropzone, toast } from '@vizzele/react';

const [files, setFiles] = useState<File[]>([]);

<FileDropzone
  accept="image/*,.pdf"
  maxSize={5 * 1024 * 1024}
  maxFiles={4}
  files={files}
  onFilesChange={setFiles}
  onReject={(r) => toast.error(`${r[0].file.name}: wrong ${r[0].reason}`)}
  hint="PNG, JPG or PDF — up to 5 MB"
/>

Props

Prop	Type	Default	Description
`accept`	`string`	—	Like <input accept>: "image/*,.pdf".
`multiple`	`boolean`	`true`	Keep several files.
`maxSize`	`number`	—	Largest file, in bytes.
`maxFiles`	`number`	—	Most files kept at once.
`files / onFilesChange`	`File[]`	—	Controlled list (uncontrolled if omitted).
`onReject`	`(FileRejection[]) => void`	—	Files turned away: { file, reason: 'type' \| 'size' \| 'count' }.
`title / hint / icon`	`ReactNode`	—	Content of the zone.
`showFiles`	`boolean`	`true`	List chosen files with a remove button.
`name`	`string`	—	Submitted with forms — the input holds every chosen file.

Usage

Props

Accessibility