Attachment

File / image chip

A file in a conversation or a form — its name, type, size, a preview, upload progress. For picking files, FileInput or Uploader.

Basic

PDFscript_ep03.pdf212 KB

storyboard.png1.4 MB

ZIPupload.zipuploading…

MOVraw.mov

EXEbad.exeUpload failed

<script setup lang="ts">
import { BlessAttachment } from "blessing-ui";
import { shots } from "./_data";
</script>

<template>
  <div class="row">
    <BlessAttachment name="script_ep03.pdf" description="212 KB" removable />
    <BlessAttachment name="storyboard.png" description="1.4 MB" :src="shots[5].src" href="#" />
    <BlessAttachment name="upload.zip" description="uploading…" state="uploading" :progress="62" />
    <BlessAttachment name="raw.mov" state="uploading" size="sm" />
    <BlessAttachment name="bad.exe" state="error" removable />
  </div>
</template>

• With href the name is a link that covers the whole card; the remove button and #actions sit above it, so each stays its own control. Remove says which file; when you take the attachment away on @remove, move focus to its neighbour, as with Chip.
• state shows uploading (with progress, or a spinner) and error.

Usage

import { BlessAttachment } from "blessing-ui";

API

Props

Name	Type	Default	Description
name*	string	—
description	string	—	size / type line
src	string	—	image preview
href	string	—	renders <a> when set
state	"idle" | "uploading" | "error"	"idle"
progress	number	—	0–100 while uploading; omit for indeterminate
size	"md" | "sm"	"md"
removable	boolean	—
removeLabel	string	"Remove"

Events

Name	Payload	Description
remove	[]

Slots

Name	Scope	Description
media	—
description	—
actions	—