[ @sdxc/ui/mixins ]
dropZone
Drag-and-drop file acceptance for a DropZone.
import { dropZone } from "@sdxc/ui/mixins";Usage
Adds drag-and-drop file acceptance to a DropZone, driving session
through native dragenter/dragover/dragleave/drop events and
mirroring its target onto the host as DROP_TARGET_ATTRIBUTE.
Signature
dropZone(session: DragSession<unknown>): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
session | DragSession<unknown> | DragSession instance the mixin drives; share the same instance with a DropIndicator or another mixin that needs to observe the same drag. |
Examples
let session = new DragSession();
<div id="uploads" mix={dropZone(session)}>
<input type="file" multiple />
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Event
DropFilesEvent
Dispatched on a DropZone's host by dropZone once a drop carries at least one file, carrying those files directly so a consumer can start uploading from the event detail.
new DropFilesEvent(files: readonly File[])| Property | Type | Description |
|---|---|---|
files | readonly readonly File[] | Files carried by the drop that triggered this event. |
Constant
DROP_TARGET_ATTRIBUTE
data-* attribute dropZone toggles on its host while a file
drag from outside the page hovers over it, so a DropZone's styling can
render the drag-over highlight from this attribute alone.
const DROP_TARGET_ATTRIBUTE = "data-drop-target"