# Dropzone

> `Dropzone` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

Source: https://ui.jcsoftdev.com/docs/components/dropzone

`Dropzone` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

## Import

```ts
import { Dropzone } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/dropzone`.

## Usage

```tsx
<Dropzone
  title="Arrastra la foto del corte"
  hint="PNG o JPG, máximo 2 MB"
  browseLabel="Elegir archivo"
  acceptedTypes={["image/*"]}
  maxSizeBytes={2 * 1024 * 1024}
  multiple
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onFiles` * | `(files: File[]) => void` |  |  |
| `onReject` | `((rejections: DropzoneRejection[]) => void)` |  | Called with the rejected files; the caller composes the user-facing message. |
| `acceptedTypes` | `string[]` |  | Accepted MIME types; supports wildcards such as `image/*`. |
| `maxSizeBytes` | `number` |  |  |
| `multiple` | `boolean` | `true` |  |
| `title` * | `string` |  |  |
| `hint` | `string` |  |  |
| `browseLabel` * | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-dropzone--default)
- [Single File](/storybook/?path=/story/forms-dropzone--single-file)
- [Only Pdf](/storybook/?path=/story/forms-dropzone--only-pdf)
- [With Feedback](/storybook/?path=/story/forms-dropzone--with-feedback)
- [Narrow](/storybook/?path=/story/forms-dropzone--narrow)

## Source

`packages/ui/src/forms/dropzone/dropzone.tsx`