opinion
UploadQueue
A floating panel in the corner of the screen listing every upload, with pause, resume and retry.
Upload panelThe panel floats at the bottom right of the window; pick a scenario
In context
Project filesAdd a file and watch the corner
Harbour rebrand files5 files
depot-fascia-final.pdf
1.4 MB
van-livery-photos.zip
48 MB
interview-03-walkthrough.mp4
212 MB
rota-export-march.csv
90 KB
mark-stacked.svg
8 KB
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | UploadQueueItem[] | Yes | — |
onPause | ((id: string) => void) | undefined | No | — |
onResume | ((id: string) => void) | undefined | No | — |
onRetry | ((id: string) => void) | undefined | No | — |
onDismiss | ((id: string) => void) | undefined | No | — |
minimized | boolean | undefined | No | — |
defaultMinimized | boolean | undefined | No | — |
onMinimizedChange | ((minimized: boolean) => void) | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Floating panel
Rendered through a portal to a fixed corner, so it outlives page changes underneath it. It renders nothing when items is empty.
data-rebar-* attributes
data-rebar-component="upload-queue", data-rebar-state="minimized" | "expanded"; each row carries data-rebar-status.
Migrating to Ant Design
Not codemod-covered. Compose AntD's Progress and List inside a fixed-position Affix.