File Upload

kai-file-upload

Accepts a click or a drag and hands you the files that were chosen.

• Shadow DOM
• 1 event
• Click or drag-and-drop
• Filterable by file type
• Customisable label

Preview

When to use

A standalone dropzone: above a prompt input, in an upload panel, or anywhere you need a drag-and-drop target. It fills its container width, so constrain the dropzone with a max-width on the parent.

Usage

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

<kai-file-upload accept="image/*" label="Drop an image to upload"></kai-file-upload>
<script type="module">
  import '@kitn.ai/ui/web-components';
  document.querySelector('kai-file-upload')
    .addEventListener('kai-files-added', (e) => console.log(e.detail.files));
</script>

• accept — standard accept attribute (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

Code

Images Only

Code

Custom Label

Code

Disabled

Code

Slots

Slot	Mode	Purpose
(default)	inject	Custom dropzone content, replacing the default label (the `label` prop is the fallback).

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
multiple	boolean	true	Allow picking more than one file. Default true.
accept	string	—	`accept` for the file picker, e.g. `image/*`.
disabled	boolean	false	No clicking and no drag-and-drop.
label	string	'Click or drop files to upload'	Default dropzone label; replace it with your own markup via the default slot.

Events

Event	Detail	Notes
kai-files-added	{ … }	Files were picked or dropped.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

FileUploadFileUploadTrigger

---

Need a hand? Report a bug Ask for help