FileAttachment

Display file attachments as compact chips or richer cards with previews. Supports upload progress, type-specific icons, and a remove action.

FileAttachment — Chip Variant

report.pdf

2.4 MB

photo.jpg

1.2 MB

data.csv

340 KB

main.tsx

4 KB

FileAttachment — Card Variant

screenshot.png1.8 MB

notes.txt12 KB

index.tsx3.2 KB

FileAttachment — Upload Progress

upload.zip

24 MB

upload.zip24 MB

Import

tsx

import { FileAttachment } from "@arc-lo/ui";

Chip variant (default)

tsx

<FileAttachment
  name="report.pdf"
  size="2.4 MB"
  type="pdf"
  onRemove={() => handleRemove()}
/>

Card variant with preview

tsx

<FileAttachment
  variant="card"
  name="screenshot.png"
  size="1.8 MB"
  type="image"
  preview="https://example.com/thumb.jpg"
  onRemove={() => handleRemove()}
/>

Upload progress

tsx

<FileAttachment
  name="upload.zip"
  size="24 MB"
  type="other"
  progress={65}
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	File name (required)
`size`	`string`	—	Human-readable file size, e.g. "2.4 MB"
`type`	`"image" \| "pdf" \| "code" \| "text" \| "csv" \| "other"`	`"other"`	Determines the file icon
`preview`	`string`	—	Image URL for thumbnail (card variant)
`progress`	`number`	—	Upload progress 0-100, shows progress bar when present
`onRemove`	`() => void`	—	Shows remove button when provided
`variant`	`"chip" \| "card"`	`"chip"`	Display style

File types

Type	Icon
`image`	Image/landscape icon
`pdf`	Document with P
`code`	Document with angle brackets
`text`	Document with lines
`csv`	Document with grid
`other`	Plain document