# FileDropzone

Start a file upload by dropping or browsing, with size and type validation on both paths.

- Family: Forms, imported from `mizu-ui` or `mizu-ui/forms`
- Docs: https://mizu.user64bit.world/components/file-dropzone
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/forms/FileDropzone.tsx

## Usage

```tsx
"use client";

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>
    </>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/file-dropzone
```

## Props

- `onFilesChange`: `(files: File[]) => void`. Receives validated files; upload remains your responsibility.
- `accept`: `string`. Comma-separated extensions or MIME patterns.
- `maxSize`: `number` (default `10485760`). Bytes per file.
- `multiple`: `boolean` (default `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.