# File Drop
Source: https://ui.spencerwueste.com/docs/components/file-drop
Markdown: https://ui.spencerwueste.com/llm/components/file-drop.md

> Drag-and-drop upload zone with an attachment list that shows progress, size, and errors.

> Live preview: https://ui.spencerwueste.com/docs/components/file-drop (demo source: `src/demos/file-drop-demo.tsx`)

## Installation

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

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/file-drop.json

## Usage

```tsx
import { FileDrop, FileItem, FileList, type DroppedFile } from "@/components/pandacoderz-ui/file-drop";
```

```tsx
<FileDrop onFiles={upload} accept=".pdf,.md" />
<FileList>
  {files.map((f) => <FileItem key={f.id} file={f} onRemove={remove} />)}
</FileList>
```

`FileDrop` hands you raw `File` objects. Map them into `DroppedFile` records and update `progress` as your upload proceeds; the item shows a bar until it reaches 100.

## API Reference

### FileDrop

| Prop | Type | Description |
| --- | --- | --- |
| `onFiles` | `(files: File[]) => void` | Called on drop or pick. |
| `accept` | `string` | Native accept string; also shown as hint text. |
| `multiple` | `boolean` | Default `true`. |
| `compact` | `boolean` | Single-line variant. |

### FileItem

| Prop | Type | Description |
| --- | --- | --- |
| `file` | `DroppedFile` | `{ id, name, size, type, progress?, error? }`. |
| `onRemove` | `(id) => void` | Shows a remove button. |
| `selected` | `boolean` | Highlighted state. |