N/A

FileAttachment

PreviousNext

Render display-only file attachment UI while your app owns upload behavior.

product-shot.png

product-shot.png

Uploaded

quarterly-report.csv

Uploading

brief.pdf

File is larger than the allowed limit

Installation

pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/file-attachment.json"

Usage

<script setup lang="ts">
import { FileAttachment } from '@/components/file-attachment'
</script>

<template>
  <FileAttachment
    name="product-shot.png"
    type="image/png"
    preview-url="/uploads/product-shot.png"
    status="uploaded"
    removable
    @remove="removeAttachment"
  />
</template>

App-Owned Upload State

FileAttachment renders display-only attachment UI. Your app owns upload handlers, preview URL creation and cleanup, file limits, server state, toast messages, and removal confirmation.

Pass display-ready state through props. Use the icon, preview, or actions slots when your app needs custom file-type icons, preview rendering, or actions.

Examples

Status states

product-shot.png

product-shot.png

Uploaded

quarterly-report.csv

Uploading

brief.pdf

File is larger than the allowed limit

API Reference

Props

PropTypeDefaultDescription
namestring—Original file name supplied by your app.
typestring""Optional MIME type used for default fallback icons.
displayNamestring—Optional display name. Falls back to name.
previewUrlstring—Optional preview image URL supplied by your app.
status'idle' | 'uploading' | 'uploaded' | 'error''idle'Display status supplied by your app.
errorstring—Error text shown when status is error.
removablebooleanfalseShow a remove button when not uploading.
removeLabelstring'Remove attachment'Accessible label for the remove button.
ariaLabelstring—Accessible label for the attachment.
classstring—Additional CSS classes for the root element.

Events

EventPayloadDescription
remove[]Emitted when the remove button is clicked.

Slots

SlotPropsDescription
preview{ name, displayName, type, previewUrl, status }Replace the preview area.
icon{ name, displayName, type, status }Replace the fallback file icon.
actions{ name, displayName, type, previewUrl, status, remove }Replace the remove/action area.
BlogPostGridModelPicker
© stackhacker