# File drop (goodtabs UI)

A drop zone with a browse button and a list of the chosen files.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/file-drop.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/file-drop`

## Usage

```tsx
import { FileDrop } from "@/components/ui/file-drop"

<FileDrop multiple accept="image/*" maxSize={5 * 1024 * 1024} onFiles={setFiles} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| accept | `string` |  | Native accept syntax, for example "image/*" or ".pdf,.csv". Applied to drops too. |
| multiple | `boolean` | `false` | Allow more than one file. |
| maxSize | `number` |  | Largest file in bytes. Bigger files stay in the list, marked too large. |
| onFiles | `(files: File[]) => void` |  | Fires with the full list after every drop, pick or remove. |
| files | `File[]` |  | Controlled list. Leave out to let the component keep its own. |
| size | `"sm" | "default"` | `"default"` | sm is one line with the icon and text side by side. |

## When to use

- Uploading attachments, avatars, imports or any file people already have on disk
- Forms where the chosen files should be visible and removable before submit
- Settings rows that take one file, in the sm size

## When not to use

- A bare native input inside a dense form, where a plain Input type="file" is enough
- Pasting or recording media, which needs a different capture flow
- Showing upload progress: pair it with your own progress list after submit

## Notes for agents

- It takes a function (onFiles), so a demo or page that passes one must be a client component
- Files over maxSize are kept in the list and marked, not dropped, so filter by file.size before upload
- Without multiple the list holds one file and a new drop replaces it; with multiple, drops append and exact duplicates are skipped
- The native input is visually hidden and opened by the browse button; the zone itself is not focusable

Docs: https://ui.goodtabs.co/components/file-drop