Skip to main content

ProgressUpload

Implemented

Per-file upload row: file icon + name + size, an inline status-colored bar (not composed of ProgressBar — composition refactor tracked), a percent/status readout, and ghost-button Cancel/Retry actions gated on status. uploading/done/error/paused states; error renders a role='alert' message and paused differentiates with a warning-tinted bar.

Categorymolecules
Sourcepatterns/molecules/progressupload.html
AI HintPer-file rows inside upload queues (S3ImageUploader wires it). The uploading gradient shares ProgressBar's teal→blue fill — contrast caveat applies there. Label props are i18n-ready overrides (Toast/Alert convention); the component never reads the i18n catalog itself.

Per-file upload row: file icon + truncated name + size, an inline progress bar with status-driven colors, and Cancel/Retry actions gated on status. Announces via aria-live for every status except done.

ProgressUpload

Molecule — Status & feedback

status="uploading" (default): teal→blue gradient fill, percent readout, cancel available while onCancel is provided.

poster.png2.4 MB
42%

This component supports light and dark mode.

ProgressUpload — done

Molecule — Status & feedback

status="done": success fill, "Done" readout, both action buttons hidden regardless of handlers.

poster.png2.4 MB
Done

ProgressUpload — error

Molecule — Status & feedback

status="error": error fill, role="alert" message, Retry (DS Button ghost) when onRetry is provided.

poster.png2.4 MB
12%

ProgressUpload — paused

Molecule — Status & feedback

status="paused": warning-tinted fill, "Paused" readout, polite live region, cancel still available.

poster.png2.4 MB
Paused

Usage

import { ProgressUpload } from '@epasslive/design-system'

<ProgressUpload
  fileName="poster.png"
  fileSize="2.4 MB"
  progress={42}
  status="uploading"
  onCancel={abort}
/>

// Error — Retry (ghost Button) + role="alert" message
<ProgressUpload fileName="poster.png" progress={12} status="error" onRetry={restart} />

Accessibility

  • Root is role="group" labelled Upload: {fileName}; the track carries role="progressbar" + the value triple, with aria-live="polite" for every status except done (uploading, paused and error all announce), and role="alert" on failure.
  • Localize every user-visible string via the label props (cancelLabel / retryLabel / doneLabel / errorLabel / pausedLabel / uploadAriaPrefix) — they default to English. Translated progressUpload.* values live in the DS i18n catalogs (i18n/en.json, i18n/fr.json); the component never reads the catalog itself (Toast/Alert label-prop convention).
  • The uploading gradient has the same WCAG 1.4.11 contrast gap as ProgressBar (one gradient end < 3:1 per theme) — tracked defect, do not cite as compliant.
  • For a plain labeled/unlabeled bar, see ProgressBar. This molecule currently re-implements its own inline bar rather than composing ProgressBar (composition refactor tracked).
Prop
Type
Default
Description
fileName*
string
—

File name — group label + title tooltip.

progress*
number
—

Percent 0–100, clamped (non-finite → 0). Exposed as data-progress-percent.

status
"uploading" | "done" | "error" | "paused"
uploading

Drives fill color, actions, and live-region behavior. No "queued" state exists.

fileSize
string
—

Human-readable size (e.g. "2.4 MB").

onCancel
() => void
—

Shows the cancel button; hidden once status="done".

onRetry
() => void
—

Shows retry when status="error".

cancelLabel
string
Cancel upload

Accessible name for cancel — pass a localized string (i18n key progressUpload.cancel).

retryLabel
string
Retry upload

Accessible name for retry — pass a localized string (i18n key progressUpload.retry).

doneLabel
string
Done

Status text shown instead of the percent when status="done" (i18n key progressUpload.done).

errorLabel
string
Upload failed. Retry or cancel.

Message announced via role="alert" on error (i18n key progressUpload.error).

pausedLabel
string
Paused

Status text shown instead of the percent when status="paused" (i18n key progressUpload.paused).

uploadAriaPrefix
string
Upload:

Group aria-label renders as `${uploadAriaPrefix} ${fileName}` (i18n key progressUpload.ariaPrefix).

className
string
—

Additional CSS classes.

id
string
—

Stable root id (useId-generated by default).

Props

Preview

ProgressUpload

Prop
Type
Required
Default
Description
fileName
string
Required
—

Name of the file being uploaded (group label + title tooltip).

progress
number
Required
—

Progress percentage, clamped 0-100 (non-finite clamps to 0).

status
'uploading' | 'done' | 'error' | 'paused'
Optional
'uploading'

Upload state driving bar color, actions and live-region behavior — exactly these four, no 'queued'.

fileSize
string
Optional
—

Human-readable size (e.g. '2.4 MB').

onCancel
() => void
Optional
—

Shows the Cancel button when provided (hidden once status='done').

onRetry
() => void
Optional
—

Shows Retry when status='error'.

cancelLabel
string
Optional
'Cancel upload'

Accessible name for cancel (i18n key progressUpload.cancel).

retryLabel
string
Optional
'Retry upload'

Accessible name for retry (i18n key progressUpload.retry).

doneLabel
string
Optional
'Done'

Status text shown instead of the percent when done (i18n key progressUpload.done).

errorLabel
string
Optional
'Upload failed. Retry or cancel.'

Message announced via role='alert' on error (i18n key progressUpload.error).

pausedLabel
string
Optional
'Paused'

Status text shown instead of the percent when paused (i18n key progressUpload.paused).

uploadAriaPrefix
string
Optional
'Upload:'

Group aria-label renders as `{uploadAriaPrefix} {fileName}` (i18n key progressUpload.ariaPrefix).

className
string
Optional
—

Additional CSS classes.

id
string
Optional
auto (useId)

Stable root id.

Quick use:<ProgressUpload />

Accessibility

ARIA rolegroup

ARIA

1 rule

WCAG 4.1.2

root is role='group' named `{uploadAriaPrefix} {fileName}`; the bar is role='progressbar' with aria-valuenow/min/max and aria-live='polite' (silent only when done); error adds a role='alert' message

Type

1 rule

NASA Rule 5

progress is exposed as data-progress-percent for e2e; the bar is re-implemented inline (rounded-full) rather than composing ProgressBar — corner-radius drift is tracked

Usage

Import

tsxSnippet
import { ProgressUpload } from "@epasslive/design-system"

Example 1

tsxSnippet
<ProgressUpload fileName="poster.png" fileSize="2.4 MB" progress={42} status="uploading" onCancel={abort} />

Example 2

tsxSnippet
<ProgressUpload fileName="poster.png" progress={12} status="error" onRetry={restart} cancelLabel="Annuler" retryLabel="Réessayer" errorLabel="Échec du téléversement." />

Anti-patterns

— Do not pass status='queued' — the union is uploading/done/error/paused

— Do not hand-roll the Cancel link — it is a ghost Button atom with a 44px tap target

Design System v4.1.0 | ePassLive