File card

FileCard is the populated state of a file upload: one uploaded asset rendered as a card surface with a preview thumbnail, filename, optional metadata line, an optional open-in-new-tab link, and an action row with optional Replace / Delete buttons. It composes alongside FileUploader, which owns the empty dropzone state. The aspectRatio slug consumes the --aspect-* token family so a CMS encodes the target image shape once and the same slug feeds Frame on the consumer side.

Use it for

• Showing an already-uploaded file (image, SVG, or generic type)
• The filled slot in an upload UI — pair with FileUploader for the empty slot
• A grid or list of uploaded assets, each with its own Replace / Delete actions

Import

import { FileCard } from '@brikdesigns/bds';

Variants

Image preview

preview="image" renders src in the thumbnail. name is the filename; meta is an optional dimensions / size line; href makes the thumbnail an open-in-new-tab link.

<FileCard
  preview="image"
  src="https://cdn.example/hero.jpg"
  aspectRatio="16-9"
  name="hero.jpg"
  meta="1600 × 900 • 248 KB"
  href="https://cdn.example/hero.jpg"
  onReplace={() => openFilePicker()}
  onDelete={() => clearImage()}
/>

SVG and icon previews

preview="svg" renders a vector src; preview="icon" renders a generic file-type placeholder for non-renderable types (PDF, ZIP) and ignores src.

<FileCard preview="svg" src="/logo.svg" name="logo.svg" />
<FileCard preview="icon" name="report.pdf" meta="PDF • 1.2 MB" />

Actions and disabled

onReplace and onDelete each render their button only when the handler is passed. disabled locks the action buttons while preserving the visual.

<FileCard preview="icon" name="locked.pdf" onDelete={remove} disabled />

Pattern: compose with FileUploader

Render FileUploader while the slot is empty, then swap to FileCard once a file has been uploaded.

{file ? (
  <FileCard preview="image" src={file.url} name={file.name} onDelete={() => setFile(null)} />
) : (
  <FileUploader onUpload={setFile} />
)}

When not to use

• Don't use it as a generic content card. A general titled surface is Card; FileCard is specifically the uploaded-asset shape.

Accessibility

• Image and SVG previews use previewAlt for alt text, falling back to name; the icon preview is aria-hidden since it carries no information beyond the filename.
• The open-in-new-tab links carry an explicit aria-label (Open {name} in new tab) and use rel="noopener noreferrer".
• Replace / Delete are real <button>s and honor disabled.

API

Plus all standard <div> HTML attributes (excluding onChange).

Related

• FileUploader — the empty / dropzone state FileCard pairs with
• Frame — consumes the same aspectRatio slug for the preview shape
• Card — the general titled-surface card
• Storybook playground