kt-drag-drop

A file drop zone. Takes a drop or a click, lists what was picked, and lets each entry be removed.

The element holds the files and reports them. Uploading is yours — it makes no requests.

In a form

Give it a name and it is a form control: a <form> submits every held file under that name, exactly as <input type="file" multiple> would, so a multipart/form-data post needs no extra code. Without a name it submits nothing, like the native input. required blocks submission until a file is held, and form.reset() empties it.

Validation

accept on a native input is advisory: the OS dialog filters by it, but a dropped file bypasses it completely. So <kt-drag-drop> re-checks every file itself, by extension (.pdf), by mime prefix (image/*) or by exact type, and fires kt-files-rejected with what it turned away and why.

max-size is in bytes and has no native equivalent at all.

Accessibility

The zone is role="button" with a tab stop and Enter/Space activation, so it can be used without a pointer — a drop zone reachable only by dragging is unusable for anyone who does not drag. Each file's remove button carries the file name in its accessible label, rather than nine identical "Delete" buttons.

API

heading rather than title: an element already has a title, and reusing it would drop the prompt into a native tooltip over the whole zone.