# Attachment — SvelteKit UI

Package: sveltekit-ui 1.1.87

Page: https://www.sveltekit-ui.com/components/attachment

Category: Media

Displays a base64 attachment with a download action and optional image, audio, or JSON preview.

Public component import: `Attachment`

Public manager import: `create_attachment_manager`

## Component notes

- notes:
  - Supported previews: image/webp, image/jpeg, image/png, image/gif; audio/mpeg, audio/wav, audio/ogg, audio/aac; application/json. Other MIME types display file metadata and a download action.
  - The component manages embedded media cleanup. Downloads require the browser; no upload or storage backend is included.

## Usage

```svelte
<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Attachment, create_attachment_manager } from "sveltekit-ui"

  const manager = create_attachment_manager({
    attachment: {
      name: "greeting.txt",
      content_type: "text/plain",
      // Raw base64 bytes, without a data URL prefix: "Hello, Svelte!".
      content: "SGVsbG8sIFN2ZWx0ZSE=",
    },
  })
</script>

<Attachment {manager} />
```

## Configuration

### `attachment`

- type: object
- required: true
- description: Attachment record: { name: string, content_type: MIME string, content: raw base64 string }. content must not include a data URL prefix. JSON content must contain UTF-8 encoded JSON bytes.

### `is_show_content`

- type: boolean | function
- default: false
- description: Show the supported preview inline in addition to its View popover. A callback is read reactively.

## Methods

### `set_val_prepped()`

- parameters:
  - input: attachment record
- returns: void
- description: Replace the attachment and prepare its preview. Invalid records and malformed JSON set content_error_message.

### `download_attachment()`

- parameters:
  - input: attachment record (optional; defaults to val_prepped)
- returns: Promise<void>
- description: Decode the base64 bytes and download a browser Blob using a sanitized filename. Failures set download_error_message.

### `destroy()`

- returns: void
- description: Destroy embedded media managers, clear download timers, and revoke owned object URLs. The component calls this during cleanup.

## Returned state

### `val_prepped`

- type: object | null
- description: Attachment plus size_label and any embedded image_manager, audio_manager, json_manager, and icon_manager.

### `is_show_content`

- type: boolean
- description: Whether the inline preview is enabled.

### `error_message`

- type: string
- description: First active content or download error; empty when neither failed.

### `content_error_message`

- type: string
- description: Invalid attachment or preview data error.

### `download_error_message`

- type: string
- description: Download failure message.

### `download_is_loading`

- type: boolean
- description: Whether a download is being prepared.

### `show_content_popover_manager`

- type: object
- description: Popover manager for the attachment preview.

### `show_content_button_manager`

- type: object
- description: View action manager.

### `download_button_manager`

- type: object
- description: Download action manager.