Skip to content

Conversation

Attachment Preview

Images and files attached to a prompt — thumbnails, type and size, upload progress, retry and remove.

2 variantsMIT

Preview

  • glossary.csvCSV · 18 KB
  • e2e-report.pdfPDF · 1.2 MB

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/attachment-preview.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { AttachmentPreview, type Attachment } from "@/components/ui/attachment-preview";

export function ComposerAttachments({ files, setFiles }: {
  files: Attachment[];
  setFiles: (files: Attachment[]) => void;
}) {
  return (
    <AttachmentPreview
      data={files} // { id, name, size, type, src?, status, progress }
      onRemove={(file) => setFiles(files.filter((f) => f.id !== file.id))}
      onRetry={(file) => upload(file.id)}
    />
  );
}

Props

PropTypeDefaultDescription
data*Attachment[]—Files in display order. Images with a src render as thumbnails that open an enlarged view; everything else renders as a file tile.
onRemove(attachment) => void—Shows a remove button on each tile (on hover, focus, or always on touch).
onRetry(attachment) => void—Shows Retry on failed file uploads.
onOpen(attachment | null) => void—Called when an image opens in the enlarged view and with null when it closes.
classNamestring—Extra classes for the root element.
type Attachment = {
  id: string;
  name: string;
  size: number;          // bytes
  type: string;          // MIME type
  src?: string;          // images only
  alt?: string;
  status?: "uploading" | "ready" | "failed";
  progress?: number;     // 0–1 while uploading
  error?: string;
};