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"
/>Summary
Functions
Renders a single-file upload progress row.
Functions
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:uploadingand:done. Defaults to0.error_message(:string) - Error description shown in the:errorstate. Defaults tonil.on_cancel(:string) - LiveView event name for the cancel button (shown in:pendingand:uploadingstates). Defaults tonil.on_retry(:string) - LiveView event name for the retry button (shown in:errorstate). Defaults tonil.class(:string) - Additional CSS classes applied to the outer wrapper. Defaults tonil.