PhiaUi.Components.UploadCard (phia_ui v0.1.17)

Copy Markdown View Source

Card for displaying a completed file upload.

Provides upload_card/1 — a self-contained card that represents a file that has already been uploaded (not a pending entry). Displays:

  • A file-type colour badge derived from the extension
  • Filename, file size (human-readable), and optional upload timestamp
  • Status badge (:done or :error)
  • Optional thumbnail preview for images
  • Optional download link and/or remove button

When to use

Use upload_card/1 in file lists, attachment panels, and document managers where you want to show files that have already been saved server-side — not files mid-upload. For files being uploaded use upload_progress/1.

Basic usage

<.upload_card
  filename="invoice_q1_2026.pdf"
  size_bytes={248_320}
  on_remove="remove_file"
/>

<.upload_card
  filename="product_photo.jpg"
  size_bytes={1_843_200}
  thumbnail_url={@file.url}
  href={@file.url}
  status={:done}
  uploaded_at="Mar 6, 2026"
/>

Summary

Functions

upload_card(assigns)

Renders a card representing a completed file upload.

Functions

upload_card(assigns)

Renders a card representing a completed file upload.

Examples

<.upload_card filename="report.pdf" size_bytes={512_000} href="/files/report.pdf" on_remove="remove_file" />

<.upload_card filename="logo.png" size_bytes={98_304} thumbnail_url={@url} status={:done} />

Attributes

  • filename (:string) (required) - The filename of the uploaded file.
  • size_bytes (:integer) - File size in bytes. Rendered as a human-readable string (KB, MB, GB). Defaults to nil.
  • uploaded_at (:string) - Human-readable timestamp string shown below the filename. Defaults to nil.
  • status (:atom) - :done shows a green badge, :error shows a red badge. Defaults to :done. Must be one of :done, or :error.
  • thumbnail_url (:string) - Image URL for inline thumbnail preview. Only rendered for image files. Defaults to nil.
  • href (:string) - Download URL. When set, renders a download icon link. Defaults to nil.
  • on_remove (:string) - LiveView event name fired when the trash/remove button is clicked. Defaults to nil.
  • class (:string) - Additional CSS classes applied to the card wrapper. Defaults to nil.