# File drop

Utility component that lets users upload files by dragging and dropping them into an area on a page, or by activating a button.

Tabs: [Guidelines](/components/web/file-drop/file-drop.guidelines.md) · [Code](/components/web/file-drop/file-drop.code.md)

## Basic usage

`Filedrop` wraps any content in a drop area. Dropped files are passed to `upload` one by one, and the area also contains a `FileInput`, so users can click to browse.

```tsx
import {Filedrop, ACCEPTED_IMAGE_TYPES} from '@pleo-io/telescope'

const ReceiptDropzone = ({onUpload}: {onUpload: (file: File) => void}) => (
    <Filedrop upload={onUpload} accept={ACCEPTED_IMAGE_TYPES} name="receipt">
        Drop a receipt here or browse your files
    </Filedrop>
)
```

## Validation

Dropped files are checked before `upload` is called:

- **Size**: files larger than `maxFileSizeAllowed` (25 MB by default) show a negative toast and are not uploaded.
- **Type**: when `accept` is set, files with another MIME type show a negative toast.
- **Count**: with `multipleFileSelection` and `maximumNumberOfFiles`, dropping more files than allowed shows a negative toast and uploads nothing.

The toasts are shown with `useToaster`, so the page needs a `ToasterProvider` and a `Toaster` in the tree. Use `ACCEPTED_IMAGE_TYPES` for the common image and PDF formats.

## Localisation

The toast messages come from the `TelescopeProvider` translations under `FileInput`, the same keys as [file input](/components/web/file-input/file-input.code).

## Accessibility

- The drop area is a `label` around the nested file input. The nested file input stays in the tab order, so keyboard users can open the file dialog with Enter or Space.
- Pass `aria-describedby` to connect the drop area to hint or error text, and `isRequired` or `isInvalid` to reflect the form state.
- Drag handlers only enhance pointer users. Always keep the browse option available.

## API reference

#### `accept`

Type: `string | undefined`

Default: -

No description available

#### `aria-describedby`

Type: `string | undefined`

Default: -

No description available

#### `className`

Type: `string | undefined`

Default: -

No description available

#### `isInvalid`

Type: `boolean`

Default: -

No description available

#### `isRequired`

Type: `boolean`

Default: -

No description available

#### `maxFileSizeAllowed`

Type: `number | undefined`

Default: -

No description available

#### `maximumNumberOfFiles`

Type: `number | undefined`

Default: -

No description available

#### `multipleFileSelection`

Type: `boolean`

Default: -

No description available

#### `name`

Type: `string | undefined`

Default: -

No description available

#### `onDragLeave`

Type: `((e: DragEvent<Element>) => void) | undefined`

##### Allowed values

- `(e: DragEvent<Element>) => void`

Default: -

No description available

#### `onDragOver`

Type: `((e: DragEvent<Element>) => void) | undefined`

##### Allowed values

- `(e: DragEvent<Element>) => void`

Default: -

No description available

#### `onDrop`

Type: `((e: DragEvent<Element>) => void) | undefined`

##### Allowed values

- `(e: DragEvent<Element>) => void`

Default: -

No description available

#### `onUploadButtonClick`

Type: `(() => void) | undefined`

##### Allowed values

- `() => void`

Default: -

No description available

#### `upload` (required)

Type: `(file: File) => void`

Default: -

No description available