Sivir UI
Studio 64

Attachment

Select, validate, preview, and remove local files before your application uploads them.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/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.

import * as Attachment from '@sivir-ui/svelte/components/attachment';
import type { AttachmentRejection } from '@sivir-ui/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>

Examples

Render standalone items when your upload client owns progress and completion state.

Upload status

Anatomy

Attachment.Root - Manages selected files.

Attachment.Trigger - Opens the file picker.

Attachment.List - Lists selected files.

Attachment.Item - Displays one selected file.