Mielui · Attachment

Installation

pnpm dlx @mielui/svelte add attachment

Usage

Bind selected files on the root and report rejected files from onReject . Selection is local only; your application owns uploading and upload state.

Set accept, maxFiles, and maxSize to limit selection. Set disabled to prevent adding or removing files and clear the drag highlight.

import * as Attachment from '@mielui/svelte/components/attachment';
import type { AttachmentRejection } from '@mielui/svelte/components/attachment';

let files = $state<File[]>([]);

function handleReject(rejections: AttachmentRejection[]) {
  console.log(rejections);
}

<Attachment.Root
  bind:files
  accept="image/*,.pdf"
  maxFiles={3}
  maxSize={5 * 1024 * 1024}
  onReject={handleReject}
>
  <Attachment.Trigger>Choose files</Attachment.Trigger>
  <Attachment.List />
</Attachment.Root>

Selection and upload ownership

Attachment validates local selection and displays files. It does not upload them. Keep upload progress and errors in your application, or use File Upload when you need an upload callback with cancellation and retry. Use the hero to test rejection messages and remove selected files. Progress is clamped from 0 to 100; omitted or nonfinite values display an indeterminate progress indicator.

Examples

Upload status

API reference

Attachment.Root

Manages selected files.

Prop	Type	Default
`files` Bindable	`File[] \| undefined`	`[]`
`accept`	`string \| undefined`	`—`
`multiple`	`boolean \| undefined`	`true`
`maxFiles`	`number \| undefined`	`—`
`maxSize`	`number \| undefined`	`—`
`disabled`	`boolean \| undefined`	`false`
`onReject`	`((rejections: AttachmentRejection[]) => void) \| undefined`	`—`
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Attachment.Item

Displays one selected file.

Prop	Type	Default
`file` Required	`File`	`—`
`status`	`AttachmentStatus \| undefined`	`'ready'`
`progress`	`number \| undefined`	`—`
`error`	`string \| undefined`	`—`
`onRemove`	`((file: File) => void) \| undefined`	`—`
`removable`	`boolean \| undefined`	`true`
`class`	`string \| undefined`	`—`

Attachment.List

Lists selected files.

Prop	Type	Default
`label`	`string \| undefined`	`'Attachments'`
`class`	`string \| undefined`	`—`

Attachment.Trigger

Opens the file picker.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`element` Bindable	`HTMLButtonElement \| HTMLAnchorElement \| undefined`	`—`
`onclick`	`((event: MouseEvent) => void) \| undefined`	`—`
`variant`	`ButtonVariant \| undefined`	`'ghost'`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| undefined`	`children ? 'md' : 'icon'`