FileDrop

A `<label>` wrapped around a hidden file input, which is the whole trick: clicking, tabbing to it and pressing Enter all work because the browser already does them. The drag handling is the only part written by hand.

import

import { FileDrop } from '@joshicodes/cock';

Upload

Drop a file on it, or tab to it and press Enter. Nothing is uploaded.

Drop files here, or browse

Images or PDFs, as many as you like

Keyboard

Tab, then Enter or Space: Opens the file dialog

Behaviour

`accept` is checked on dropped files too. The browser only enforces it in its own dialog, so a drop would otherwise hand you the PDF you said you did not want.
Files that fail `accept` are dropped quietly. Compare the count you get against what you expected if you want to say something about it.
The input is cleared after every pick, so choosing the same file again after removing it still fires.
`multiple` appends to the list rather than replacing it; a single-file drop zone replaces.

API

Read out of the component sources at build time, so it matches the version you installed. Every component also takes class, merged through tailwind-merge so your utility wins.

Props of FileDrop

Prop	Type	Default
`files` bindable The files chosen so far, in the order they were picked.	`File[]`	`[]`
`accept` Same syntax as the native attribute: `.png,.jpg` or `image/*`.	`string`	—
`multiple`	`boolean`	`false`
`disabled`	`boolean`	`false`
`hint` Line under the heading, usually what you accept and how big.	`string`	—
`class`	`string`	—

Snippets of FileDrop

Snippet	Type	Default
`children` Replaces the default wording inside the box.	`Snippet`	—

Events of FileDrop

Event	Type	Default
`onselect` Runs with the files that passed `accept`, dropped or picked.	`(files: File[]) => void`	—