FileDropzone
Start a file upload by dropping or browsing, with size and type validation on both paths.
Live — this one is real
image/*,.svg · up to 10 MB each
Usage
import { useState } from "react";
import { FileDropzone } from "mizu-ui";
export function Example() {
const [files, setFiles] = useState<File[]>([]);
return (
<>
<FileDropzone
label="Attach artwork"
accept="image/*,.svg"
multiple
onFilesChange={setFiles}
/>
<p>{files.map((f) => f.name).join(", ")}</p>
</>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect forms/FileDropzone.tsx
Source is included in the npm package under src/forms/FileDropzone.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onFilesChange | (files: File[]) => void | — | Receives validated files; upload remains your responsibility. |
| accept | string | — | Comma-separated extensions or MIME patterns. |
| maxSize | number | 10485760 | Bytes per file. |
| multiple | boolean | false | Allow multiple files. |
Accessibility
Keyboard users open the native file dialog with the browse button. Validation errors name the rejected files. Client checks do not replace server validation.
Motion
CSS transitions explain state changes. Reduced motion removes travel.