# File dropzone

> Drag-and-drop upload with type, size and count checks and per-file progress.

Component · Pro · https://lodeui.com/components/file-dropzone

## When to use

- Uploading attachments, imports, avatars and documents.

## When not to use

- A single small file in a dense form: a plain file input is enough.

## Installation

```bash
npx shadcn@latest add @lode/file-dropzone
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FileDropzone } from "@/components/ui/file-dropzone";

export function Attachments() {
  return (
    <FileDropzone
      accept="image/*,.pdf"
      maxSize={5 * 1024 * 1024}
      upload={(file, onProgress) => uploadWithProgress("/api/upload", file, onProgress)}
    />
  );
}
```

## API reference

### FileDropzone

A drop target and browse button that validates files and lists them with progress.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| accept | `string` | – | Like the input accept attribute: "image/*,.pdf". |
| maxSize / maxFiles / multiple | `number / number / boolean` | `10 MB / 10 / true` | Limits. |
| upload | `(file, onProgress) => Promise<void>` | – | Upload each file and report 0–1. Throw to mark it failed. |
| onFilesChange | `(files: File[]) => void` | – | Accepted files whenever the list changes. |
| hint | `string` | – | Replaces the generated limits line. |

### formatBytes

Formats a byte count as B, KB or MB.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open the file browser |
| Tab | Reach each file's remove button |

## Accessibility

- The drop area is a button described by the limits.
- Rejections are announced with role="alert".
- Each upload is a labelled progressbar; remove buttons name the file.

## Motion

- The cloud bobs and the area glows while dragging over.
- Files slide in, progress springs, a check pops on success, removed rows slide out.

## Responsive behavior

- Up to 448px; long names truncate.

## Performance

- Validation happens before any upload starts.

## Notes for AI

- Validate on the server too; accept is only a hint to browsers.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.