Component registry

Upload and progress

A file transfer with a truthful determinate meter and cancel action.

All components · Kit documents · Definition as JSON

Live web demo

photo.jpg45% uploaded45%

Web source: openvibe-shared/files · Shared upload control and progress meter

Anatomy

  • filename and type
  • meterbytes sent of total
  • cancelstop transfer

Props

name
string
totalBytes
number
sentBytes
number
cancellable
boolean

Behavior and accessibility

States
queued · uploading · complete · failed · cancelled
Tokens
color.accent.strong · color.text.primary · size.tap
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Announce file name, percent and state without repeating every byte. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use LinearProgressIndicator(progress) with state text and cancel IconButton.

Material 3 container: SurfaceContainer

iOS · SwiftUI

Use ProgressView(value:total:) with a cancel Button.

Example definition

{
  "schema": "design.component@1",
  "name": "upload-progress",
  "props": {
    "name": "photo.jpg",
    "totalBytes": 100,
    "sentBytes": 45
  }
}

Other components