File Upload

kai-file-upload

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.

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

Preview

When to use

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:

<kai-file-upload accept="image/*" label="Drop an image to upload"></kai-file-upload>
<script type="module">
  import '@kitn.ai/ui/elements';
  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

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

Code

Images Only

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

Code

Custom Label

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

Code

Disabled

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

Code

Props

Property	Type	Default	Notes
multiple	boolean	true	Allow selecting multiple files (default true).
accept	string	—	`accept` attribute for the file picker (e.g. `image/*`).
disabled	boolean	false	Disable the dropzone — no clicking, no drag-and-drop.
label	string	'Click or drop files to upload'	Default dropzone label (overridable 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