Upload List

Files in flight, with per-file progress and a retry for the ones that failed. A failed upload keeps its row rather than vanishing — silently dropping it is how people lose work.

src/components/ui/upload-list.tsx

About

From the component's own source, where it was written.

A batch of uploads with an aggregate bar.

Overall progress is weighted by file size, not by count. Five thumbnails and one video are not six equal sixths, and a per-file average sits at 83% while the only file that matters has barely started.

Failures stay in the list with a retry. Dropping them silently is how a user ends up believing an upload finished; the failed row is the notification.

Install

npx astralyx-ui add upload-list

Usage

import { UploadList } from '@/components/ui/upload-list'

<UploadList uploads={uploads} onRetry={retry} onRemove={remove} onCancelAll={cancel} />

Composer

Change the props and the source below follows.

Uploading 2 of 45%

  • quarterly-report-final-v4.pdf

    4.0 MB
    72%

  • hero-render.psd

    176 MB
    18%

  • notes.txt

    2.0 KB

  • archive.zip

    488 MBExceeds the 200 MB limit
Props
tsx
<UploadList uploads={uploads} onRetry={retry} onRemove={remove} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

UploadList

A batch of uploads with an aggregate bar.

Extends Omit<ComponentProps<'div'>, 'children'>.

PropTypeDefaultDescription
uploadsAttachment[]requiredThe same shape AttachmentPreview takes, so one list can carry files mid-upload and files already attached.
onRetry(id: string) => void—Shown only on rows with an error.
onRemove(id: string) => void——
onCancelAll() => void—Appears while anything is still uploading. Omit for a list that cannot be interrupted.
cancelAllLabelReactNode'Cancel remaining'—
summaryderived—Overall progress is weighted by file size, not by count — 3 of 4 files done means little when the fourth is 180 MB.