# dropZone

> Drag-and-drop file acceptance for a DropZone: tracks a file drag over the host through a shared `DragSession`, mirrors its target onto the host as a `data-*` attribute for the drag-over highlight, and turns a completed drop into a typed event carrying the dropped files.

```ts
import { dropZone } from "@sdxc/ui/mixins";
```

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

```ts
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

```tsx
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.

### 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.

#### Signature

```ts
new DropFilesEvent(files: readonly File[])
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `files` | `readonly readonly File[]` | Files carried by the drop that triggered this event. |

### 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.

#### Signature

```ts
const DROP_TARGET_ATTRIBUTE = "data-drop-target"
```