# FileDropzone

A drop target for local files with a browse button and type, size and slot checks.

- **Use it for**: Picking local files by drop or browse, with type, size and slot checks.
- **Not for**: Showing files already attached. Try [Attachment](https://unseenui.com/components/attachment/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { FileDropzone } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<FileDropzone accept="image/*,.pdf" maxFileBytes={5 * 1024 * 1024} onFilesSelected={add} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `accept` | `string` | Comma-separated MIME types, MIME wildcards, or file extensions. |
| `browseLabel` | `string` | Text of the keyboard-reachable button that opens the file chooser. |
| `children` | `ReactNode` | Extra content under the hint, such as a list of files already chosen. |
| `disabled` | `boolean` |  |
| `hint` | `ReactNode` | Accepted types, limits or anything else the person should know before choosing. |
| `label` | `string` | Heading inside the zone. |
| `maxFileBytes` | `number` |  |
| `multiple` | `boolean` | Allow more than one file per drop or browse. |
| `onFilesSelected` (required) | `(files: File[]) => void` | Receives accepted browser File objects. |
| `onReject` | `((rejections: AttachmentRejection[]) => void)` |  |
| `remainingSlots` | `number` | Available slots, including existing attachments; host updates this value. |

## Keyboard

Tab reaches the browse button; Enter or Space opens the file chooser.

## Works with

[Chat](https://unseenui.com/components/chat/), [PromptInput](https://unseenui.com/components/prompt-input/), [Message](https://unseenui.com/components/message/), [StreamingResponse](https://unseenui.com/components/streaming-response/), [MessageActions](https://unseenui.com/components/message-actions/), [Suggestions](https://unseenui.com/components/suggestions/), [Attachment](https://unseenui.com/components/attachment/), [ModelSelector](https://unseenui.com/components/model-selector/), [FeedbackCapture](https://unseenui.com/components/feedback-capture/), [Reasoning](https://unseenui.com/components/reasoning/), [SuggestTextarea](https://unseenui.com/components/suggest-textarea/), [Checkpoint](https://unseenui.com/components/checkpoint/)

Page: https://unseenui.com/components/file-dropzone/