# usePasteFiles

Calls `onFiles` when the user pastes files, such as a screenshot, while focus is inside an element. Returns a callback ref for the element, e.g. a chat input or its wrapper.

Only pastes that contain matching files are taken: their default is prevented so the file name isn't pasted as text. Plain text pastes are left alone.

## Import

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

## Usage

```ts
const ref = usePasteFiles((files) => attach(files), { accept: 'image/*' })
return <textarea ref={ref} placeholder="Message, or paste a screenshot" />
```

## When to use it

Pasting images into a chat, a comment box, an editor, or an upload area.

## When not to

You want drag and drop; use `useFileDrop` (they work well together). Keep an `<input type="file">` too, for users who don't paste.

## API

```ts
function usePasteFiles<T extends HTMLElement = HTMLElement>(onFiles: (files: File[], event: ClipboardEvent) => void, options?: PasteFilesOptions): (element: T | null) => void
```

| Parameter | Description |
| --- | --- |
| `onFiles` | Called with the pasted files and the event. Can change every render. |
| `options` | `enabled`, `accept`. Optional. |

**Returns** A callback ref. Pass it to the element that contains the focused input.

### Types

```ts
export type PasteFilesOptions = {
  /** Listen while `true`. Default `true`. */
  enabled?: boolean;
  /** Which files to take, like an `<input type="file">` `accept`: `'image/*'`, `'application/pdf'`, `'.csv'`. Default: all files. */
  accept?: string;
};
```

## Browser support

Works in all modern browsers.

## Coming from another library?

Other libraries call this `usePaste`, `useClipboardFiles`.

---

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