File drop
stable 3.2 kB<hk-file-drop>A drop zone with a real browse fallback and per-file progress. Dragging is a convenience, never the only way in. The progress bar is an indicator, not a receipt: at 100% it has nothing left to say, so it clears and the row settles into a plain "Uploaded" — a list of finished uploads should read as a list, not as a wall of full bars.
#upload#files
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| accept | string[] | [] | MIME types or extensions. Empty accepts anything. |
| multiple | boolean | true | Allows more than one file per drop. |
| maxSize | number | null | null | Per-file byte ceiling. Oversize files are rejected with a reason. |
| disabled | boolean | false | Ignores drops and disables the browse button. |
| keepProgress | boolean | false | Holds the bar at 100% after an upload finishes. Off by default — a completed bar reports nothing the "Uploaded" row does not. |
Outputs
filesEventEmitter<File[]>Accepted files, after filtering.
uploadedEventEmitter<File>Fires per file as it reaches 100%.
rejectedEventEmitter<HkRejection[]>Files that failed, each with a reason.
Keyboard
- Enter / Space Opens the file browser from the zone
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-drop-border | #cbd5e1 | Dashed border when idle. |
| --hk-drop-border-active | #dc2626 | Border while a drag is over the zone. |
| --hk-drop-bg-active | rgb(220 38 38 / 0.06) | Fill while a drag is over the zone. |
Accessibility
- The browse control is a real file input behind a label, so keyboard and screen-reader users are not asked to drag.
- Progress is announced politely per file rather than on every percent tick.
- Rejections say why — type or size — instead of failing silently.