# useFileDrop

Turns an element into a drop zone for files, and reports when files are dragged over it.

`isOver` does not flicker when the pointer moves over child elements (it counts enter/leave pairs). Only reacts to drags that carry files, so dragging text or links inside the page is unaffected. Prevents the browser from opening a file dropped on the zone. Returns a callback ref for the element.

## Import

```ts
import { useFileDrop } from '@vincent.ri/react-tils'
// or only this hook
import { useFileDrop } from '@vincent.ri/react-tils/useFileDrop'
```

## Usage

```ts
const [ref, isOver] = useFileDrop((files) => upload(files.filter((f) => f.type.startsWith('image/'))))
return (
  <div ref={ref} className={isOver ? 'zone active' : 'zone'}>
    Drop images here, or <input type="file" accept="image/*" multiple onChange={(e) => upload([...e.target.files!])} />
  </div>
)
```

## When to use it

An upload area, an "import file" panel, or dropping images into an editor.

## When not to

A plain `<input type="file">` is enough; keep one anyway as the keyboard and screen-reader accessible way to pick files. Filter file types and sizes in `onDrop`; the browser doesn't.

## API

```ts
function useFileDrop<T extends HTMLElement = HTMLElement>(onDrop: (files: File[], event: DragEvent) => void, options?: {
  enabled?: boolean;
}): [(element: T | null) => void, boolean]
```

| Parameter | Description |
| --- | --- |
| `onDrop` | Called with the dropped files. Can change every render. |
| `options` | `enabled`: accept drops while `true`. Default `true`. |

**Returns** `[ref, isOver]`. Pass `ref` to the drop zone's `ref` prop.

## Browser support

Works in all modern browsers.

---

336 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useFileDrop.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useFileDrop/
Previous: [usePointerPosition](https://vincentri.github.io/react-tils/hooks/usePointerPosition.md)
Next: [usePasteFiles](https://vincentri.github.io/react-tils/hooks/usePasteFiles.md)