build69
Sign inGet API key
build69  /  Components  /  Feedback & Status  /  UploadProgress

UploadProgress

v1.0.7Updated 27 Aug 2026

Rich file-upload progress display. Three modes (single / list / aggregate); shows bytes uploaded / total, speed (auto-computed via rolling 10-sample buffer if not provided), ETA, chunked-upload segmented progress bar; st

View source← Back to catalog

Preview

Live · 13 stories
SingleUploadingOpen ↗
▸Why this is recommendedformuploadprogressbytes+5

UploadProgress — single uploading.

Recommended for+14
  • ✓Bulk import progress pages
  • ✓Resumable upload flows
  • ✓Embedded inside Upload
  • ✓Aggregate dashboards for many uploads
Tags+6
formuploadprogressbytesspeedetachunkedstatussingleuploading
Features+4
  • Modes: single / list / aggregate
  • Bytes uploaded / total display
  • Speed indicator (auto-computed via rolling 10-sample buffer)
  • ETA indicator (auto-computed)
  • Chunked-upload segmented progress bar
  • Status pills (queued / uploading / paused / scanning / verifying / done / failed / cancelled)
  • Per-file pause / resume / retry / cancel / remove actions
  • Aggregate expandable list
  • Exports formatBytes / formatSpeed / formatEta / computeSpeedAndEta
  • i18n: labels prop overrides every built-in string (status pills, meta rows, sr announcements, action aria-labels, aggregate header/summary); numbers, byte sizes and ETA durations format through LocaleProvider (formatBytes / formatSpeed / formatEta accept an optional FormatLocale)
Not recommended for−2
  • ✕Simple file picker (use FileUpload)
  • ✕Generic progress bar (use Progress)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "UploadProgress" })

Usage

import { UploadProgress } from '@/components/feedback/upload-progress';

<UploadProgress
  mode="aggregate"
  files={files}
  expandable
  onPause={pause}
  onResume={resume}
  onRetry={retry}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
mode

Display mode

'single' | 'list' | 'aggregate'—
file

Single-mode file

UploadProgressFile—
files

List / aggregate files

UploadProgressFile[]—
showSpeed

Show speed (default true)

boolean—
showEta

Show ETA (default true)

boolean—
showBytes

Show bytes (default true)

boolean—
showChunks

Force chunked segments

boolean—
expandable

Aggregate expand-to-list

boolean—
onPause

Pause handler

function—
onResume

Resume handler

function—
onRetry

Retry handler

function—
onCancel

Cancel handler

function—
onRemove

Remove handler

function—
labels

Override any built-in UI string — status pills, meta rows, screen-reader announcements, action aria-labels, aggregate header/summary (i18n). Merged over DEFAULT_UPLOAD_PROGRESS_LABELS; {token} templates for parameterized strings. Numbers, byte sizes and ETA durations follow LocaleProvider.

Partial<UploadProgressLabels>—

Related

Platform docsAll componentsSource files