# FileDropZone Documentation

## Installation

```bash
jsrepo add file-drop-zone
```

## Components

### Root

The root file drop zone component. Renders a hidden file input element.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLInputElement | null | false | true | A reference to the input element. |
| id | string | - | false | false | The unique identifier for the file input element. Auto-generated if not provided. |
| children | Snippet | - | false | false | The content to render inside the drop zone. Typically contains FileDropZone.Trigger and/or FileDropZone.Textarea components. |
| onUpload | (files: File[]) => Promise<void> | - | true | false | Called with the uploaded files when the user drops or selects files. |
| maxFiles | number | - | false | false | The maximum number of files allowed to be uploaded. |
| fileCount | number | - | false | false | The current number of files uploaded. Required if using maxFiles. |
| maxFileSize | number | - | false | false | The maximum size of a file in bytes. |
| onFileRejected | (opts: { reason: FileRejectedReason; file: File }) => void | - | false | false | Called when a file does not meet the upload criteria (size, or type). |
| accept | string | - | false | false | A comma separated list of one or more file types to accept. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)  Example: ".doc,.docx,application/msword" Common: "audio/*", "image/*", "video/*" |

### Trigger

The trigger element for the file drop zone. Renders as a label that activates the file input. Provides a default UI if no children are provided.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLLabelElement | null | false | true | A reference to the label element. |
| children | Snippet | - | false | false | Custom content to render inside the trigger. If not provided, a default drag-and-drop UI is shown. |

### Textarea

A textarea component that supports file uploads via drag-and-drop, paste, and click-to-select. Integrates with the FileDropZone root component.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| child | Snippet<[{ props: HTMLAttributes<HTMLTextAreaElement> }]> | - | false | false | Custom render function for the textarea element. Receives props to spread on the textarea. |
| onpaste | (e: ClipboardEvent) => void | - | false | false | Called when content is pasted into the textarea. Also handles file paste events. |
| ondragover | (e: DragEvent) => void | - | false | false | Called when files are dragged over the textarea. |
| ondrop | (e: DragEvent) => void | - | false | false | Called when files are dropped onto the textarea. Also handles file drop events. |