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

Standalone upload progress component with status states.

Provides `upload_progress/1` — a self-contained progress row that shows the
upload status of a single file. Useful outside of Phoenix LiveView's native
upload system, e.g. when tracking progress from a custom JS uploader or
when displaying server-side upload task status.

## Status states

| Status | Visual |
|--------|--------|
| `:pending` | Pulsing grey bar — queued, not yet started |
| `:uploading` | Animated blue bar with progress % |
| `:done` | Solid green bar at 100% with checkmark |
| `:error` | Red bar with error message + retry button |
| `:canceled` | Strikethrough name, greyed out |

## Basic usage

    <.upload_progress
      filename="invoice.pdf"
      status={:uploading}
      progress={42}
    />

    <.upload_progress
      filename="report.xlsx"
      status={:done}
      progress={100}
    />

    <.upload_progress
      filename="photo.png"
      status={:error}
      error_message="File too large — maximum 10 MB"
      on_retry="retry_upload"
      on_cancel="cancel_upload"
    />

# `upload_progress`

Renders a single-file upload progress row.

## Examples

    <.upload_progress filename="cv.pdf" status={:uploading} progress={67} on_cancel="cancel" />

    <.upload_progress filename="photo.jpg" status={:done} progress={100} />

    <.upload_progress filename="data.csv" status={:error} error_message="Network error" on_retry="retry" />

## Attributes

* `filename` (`:string`) (required) - Name of the file being uploaded.
* `status` (`:atom`) - Current upload status atom. Defaults to `:pending`. Must be one of `:pending`, `:uploading`, `:done`, `:error`, or `:canceled`.
* `progress` (`:integer`) - Upload progress percentage (0–100). Only meaningful for `:uploading` and `:done`. Defaults to `0`.
* `error_message` (`:string`) - Error description shown in the `:error` state. Defaults to `nil`.
* `on_cancel` (`:string`) - LiveView event name for the cancel button (shown in `:pending` and `:uploading` states). Defaults to `nil`.
* `on_retry` (`:string`) - LiveView event name for the retry button (shown in `:error` state). Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes applied to the outer wrapper. Defaults to `nil`.

---

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