PhiaUi.Components.FileCard (phia_ui v0.1.17)

Copy Markdown View Source

File attachment card with type-based icon and color coding.

Displays a file's name, size, upload date, and a type-specific icon. Supports two layout variants: :default (icon + stacked info) and :compact (single row, suitable for lists or tables). File type is automatically detected from the file extension.

Supported file types and icon colors

Extension(s)Detected typeIcon colour
.pdf:pdfRed
.doc, .docx:docBlue
.xls, .xlsx:xlsEmerald
.ppt, .pptx:pptOrange
.jpg, .jpeg, .png, .gif, .webp:imageViolet
.zip, .rar, .tar, .gz:archiveYellow
.mp3, .wav, .mp4, .mov:mediaPink
Anything else:defaultMuted

Layout variants

  • :default — icon block on the left, filename + extension badge on top, size and date below. Actions slot wraps below the info block.
  • :compact — single row: icon (smaller, 36×36) + filename + size/date inline. Actions slot stays in the row.

Examples

<%!-- PDF attachment in default layout --%>
<.file_card filename="report-q1.pdf" size="2.4 MB" uploaded_at="Mar 6, 2026">
  <:actions>
    <.button size={:sm} variant={:outline} href="/files/report-q1.pdf" download>
      Download
    </.button>
  </:actions>
</.file_card>

<%!-- Compact list row --%>
<.file_card filename="presentation.pptx" size="8.1 MB" variant={:compact} />

<%!-- File list from assigns --%>
<div class="space-y-2">
  <.file_card
    :for={file <- @attachments}
    filename={file.name}
    size={file.human_size}
    uploaded_at={file.inserted_at_label}
    href={file.download_url}
  />
</div>

Summary

Functions

file_card(assigns)

Renders a file attachment card.

Functions

file_card(assigns)

Renders a file attachment card.

The card layout contains:

  • A colored icon block (auto-detected from filename extension).
  • The filename with a monospace extension badge (e.g. "PDF", "XLSX").
  • Optional size and uploaded_at metadata labels.
  • An optional :actions slot for download, delete, or share buttons.

When href is set, the filename renders as a download link. When no href is provided, the filename is a plain <span>.

Examples

<%!-- PDF attachment --%>
<.file_card filename="invoice.pdf" size="1.2 MB" uploaded_at="Mar 6, 2026">
  <:actions>
    <.button size={:sm} variant={:outline}>Download</.button>
  </:actions>
</.file_card>

<%!-- Compact single-row layout --%>
<.file_card filename="data.xlsx" size="512 KB" variant={:compact} />

<%!-- With download link --%>
<.file_card
  filename="contract.docx"
  size="320 KB"
  href="/downloads/contract.docx"
  uploaded_at="2 days ago"
/>

Attributes

  • filename (:string) (required) - File name including extension.
  • size (:string) - Human-readable file size (e.g. '2.4 MB'). Defaults to nil.
  • uploaded_at (:string) - Upload date/time label. Defaults to nil.
  • href (:string) - Download link for the file. Defaults to nil.
  • variant (:atom) - Layout variant: :default (stacked) or :compact (single row). Defaults to :default. Must be one of :default, or :compact.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the card element.

Slots

  • actions - Action buttons (download, delete, share, etc.).