# `PhiaUi.Components.UploadCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/upload_card.ex#L1)

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"
    />

# `upload_card`

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`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*