# File Upload

A click-or-drag dropzone that fires a single event with the selected files — ready to drop into any framework or plain HTML.

<p class="kai-tag-sub">kai-file-upload</p>

A click-or-drag dropzone that fires one event with the selected files — constrain it to a file type, limit to a single pick, or lock it entirely with a single attribute.

## Preview

> **tip:** 
Reach for `<kai-file-upload>` for a standalone dropzone — above a prompt input, in a dedicated upload panel, or anywhere you need a zero-dependency drag-and-drop target. In SolidJS, compose the `FileUpload` and `FileUploadTrigger` primitives directly for finer control. The element is `display: block` and fills its container width; set a `max-width` on the parent to constrain the dropzone.

## Usage

All four props are plain HTML attributes — nothing to set in JavaScript:

```html
<kai-file-upload accept="image/*" label="Drop an image to upload"></kai-file-upload>
<script type="module">

  document.querySelector('kai-file-upload')
    .addEventListener('kai-files-added', (e) => console.log(e.detail.files));
</script>
```

- **`accept`** — standard [`accept` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) (e.g. `image/*`, `.pdf,.docx`). Omit to allow any file type.
- **`multiple`** — boolean, defaults to `true`. Set `multiple="false"` to restrict to a single file.
- **`kai-files-added`** — fires with `detail.files` as a native `File[]`; pass straight to `FormData` or your upload function.

## Examples

### Default

Accepts any file type; click or drag to trigger `kai-files-added`.

### Images Only

`accept="image/*"` and `multiple={false}` — useful for avatar or cover-photo uploads.

### Custom Label

Override the default copy with `label` when context makes it too generic.

### Disabled

Lock the dropzone while an upload is in progress or the user lacks permissions.

## Slots

## Props

## Events

## Composed from