Product block

Upload Progress List

The list that follows the dropzone: complete, uploading, queued and failed rows with cancel and retry — because hiding the failure is the classic upload bug.

171 lineslucide-reactAdded 13 Aug 2026

upload
progress
files
retry
queue

What's included

components/upload-progress-list.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add upload-progress-list

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

onboarding-deck.pdf4.2 MB
Uploaded
team-offsite-photos.zip212 MB
62%
homepage-hero.png8.7 MB
18%
q3-financials.xlsx318 KB
Queued — waiting for a slot
launch-video-draft.mp41.4 GB
Connection lost at 34%

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/upload-progress-list.tsx

'use client'

/**
 * <UploadProgressList> — the list that follows the dropzone.
 *
 * The dropzone is the easy half of an uploader; this list is where the
 * real work lives, because it is the only place cancel, retry and
 * failure can exist. The classic bug is hiding the failed row — the
 * upload dies, the row vanishes, and the user walks away certain their
 * file went up. Here a failure stays visible, says why, and carries a
 * retry button, which is the entire contract of the component.
 *
 * Progress bars are real `role="progressbar"` elements with
 * `aria-valuenow`, not styled divs — a screen reader should hear 62%,
 * not silence. The shimmer on active rows is `motion-safe:` gated.
 */

import * as React from 'react'
import {
  CircleCheck,
  FileArchive,
  FileImage,
  FileText,
  File as FileIcon,
  RotateCcw,
  X,
} from 'lucide-react'

export type UploadState = 'complete' | 'uploading' | 'queued' | 'failed'

export interface UploadRow {
  id: string
  name: string
  size: string
  state: UploadState
  /** 0–100, meaningful only while uploading. */
  progress?: number
  error?: string
}

export interface UploadProgressListProps {
  files?: UploadRow[]
  className?: string
}

const DEFAULT_FILES: UploadRow[] = [
  { id: 'f1', name: 'onboarding-deck.pdf', size: '4.2 MB', state: 'complete' },
  { id: 'f2', name: 'team-offsite-photos.zip', size: '212 MB', state: 'uploading', progress: 62 },
  { id: 'f3', name: 'homepage-hero.png', size: '8.7 MB', state: 'uploading', progress: 18 },
  { id: 'f4', name: 'q3-financials.xlsx', size: '318 KB', state: 'queued' },
  { id: 'f5', name: 'launch-video-draft.mp4', size: '1.4 GB', state: 'failed', error: 'Connection lost at 34%' },
]

function iconFor(name: string) {
  const ext = name.split('.').pop()?.toLowerCase() ?? ''
  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext)) return FileImage
  if (['zip', 'tar', 'gz', 'rar', '7z'].includes(ext)) return FileArchive
  if (['pdf', 'doc', 'docx', 'txt', 'md'].includes(ext)) return FileText
  return FileIcon
}

export function UploadProgressList({
  files = DEFAULT_FILES,
  className = '',
}: UploadProgressListProps) {
  const [rows, setRows] = React.useState(files)

  function cancel(id: string) {
    setRows((prev) => prev.filter((row) => row.id !== id))
  }

  function retry(id: string) {
    setRows((prev) =>
      prev.map((row) =>
        row.id === id
          ? { ...row, state: 'uploading' as const, progress: 12, error: undefined }
          : row,
      ),
    )
  }

  return (
    <ul className={`mx-auto w-full max-w-lg space-y-2 ${className}`}>
      {rows.map((row) => {
        const Icon = iconFor(row.name)
        return (
          <li
            key={row.id}
            className="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3"
          >
            <span
              aria-hidden
              className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
                row.state === 'failed'
                  ? 'bg-destructive/10 text-destructive'
                  : row.state === 'complete'
                    ? 'bg-primary/10 text-primary'
                    : 'bg-muted text-muted-foreground'
              }`}
            >
              {row.state === 'complete' ? (
                <CircleCheck className="h-4 w-4" />
              ) : (
                <Icon className="h-4 w-4" />
              )}
            </span>

            <div className="min-w-0 flex-1">
              <p className="flex items-baseline justify-between gap-3">
                <span className="truncate text-sm font-medium text-card-foreground">
                  {row.name}
                </span>
                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                  {row.size}
                </span>
              </p>

              {row.state === 'complete' ? (
                <p className="mt-0.5 text-xs text-muted-foreground">Uploaded</p>
              ) : row.state === 'queued' ? (
                <p className="mt-0.5 text-xs text-muted-foreground">Queued — waiting for a slot</p>
              ) : row.state === 'failed' ? (
                <p className="mt-0.5 text-xs text-destructive">{row.error ?? 'Upload failed'}</p>
              ) : (
                <div className="mt-1.5 flex items-center gap-2">
                  <div
                    role="progressbar"
                    aria-valuenow={row.progress ?? 0}
                    aria-valuemin={0}
                    aria-valuemax={100}
                    aria-label={`Uploading ${row.name}`}
                    className="h-1 flex-1 overflow-hidden rounded-full bg-muted border border-transparent"
                  >
                    <span
                      className="block h-full rounded-full bg-primary motion-safe:animate-pulse border border-transparent"
                      style={{ width: `${row.progress ?? 0}%` }}
                    />
                  </div>
                  <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                    {row.progress ?? 0}%
                  </span>
                </div>
              )}
            </div>

            {row.state === 'failed' ? (
              <button
                type="button"
                onClick={() => retry(row.id)}
                className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1.5 text-xs font-semibold transition-colors hover:bg-muted"
              >
                <RotateCcw aria-hidden className="h-3.5 w-3.5" />
                Retry
              </button>
            ) : row.state !== 'complete' ? (
              <button
                type="button"
                onClick={() => cancel(row.id)}
                aria-label={`Cancel upload of ${row.name}`}
                className="shrink-0 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              >
                <X aria-hidden className="h-4 w-4" />
              </button>
            ) : null}
          </li>
        )
      })}
    </ul>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/upload-progress-list.tsx and import it where you need the section:

import { UploadProgressList } from '@/components/upload-progress-list'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`files`	`UploadRow[]`	`DEFAULT_FILES`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

upload-progress-list.html

<!--
  Upload Progress List — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<ul class="mx-auto w-full max-w-lg space-y-2 ">
  <li class="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3">
    <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-4 w-4" aria-hidden="true">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="m9 12 2 2 4-4"></path>
      </svg>
    </span>
    <div class="min-w-0 flex-1">
      <p class="flex items-baseline justify-between gap-3">
        <span class="truncate text-sm font-medium text-card-foreground">onboarding-deck.pdf</span>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">4.2 MB</span>
      </p>
      <p class="mt-0.5 text-xs text-muted-foreground">Uploaded</p>
    </div>
  </li>
  <li class="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3">
    <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-archive h-4 w-4" aria-hidden="true">
        <path d="M10 12v-1"></path>
        <path d="M10 18v-2"></path>
        <path d="M10 7V6"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <path d="M15.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .274 1.01"></path>
        <circle cx="10" cy="20" r="2"></circle>
      </svg>
    </span>
    <div class="min-w-0 flex-1">
      <p class="flex items-baseline justify-between gap-3">
        <span class="truncate text-sm font-medium text-card-foreground">team-offsite-photos.zip</span>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">212 MB</span>
      </p>
      <div class="mt-1.5 flex items-center gap-2">
        <div role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" aria-label="Uploading team-offsite-photos.zip" class="h-1 flex-1 overflow-hidden rounded-full bg-muted border border-transparent">
          <span class="block h-full rounded-full bg-primary motion-safe:animate-pulse border border-transparent" style="width:62%"></span>
        </div>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">62%</span>
      </div>
    </div>
    <button type="button" aria-label="Cancel upload of team-offsite-photos.zip" class="shrink-0 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </li>
  <li class="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3">
    <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image h-4 w-4" aria-hidden="true">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <circle cx="10" cy="12" r="2"></circle>
        <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"></path>
      </svg>
    </span>
    <div class="min-w-0 flex-1">
      <p class="flex items-baseline justify-between gap-3">
        <span class="truncate text-sm font-medium text-card-foreground">homepage-hero.png</span>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">8.7 MB</span>
      </p>
      <div class="mt-1.5 flex items-center gap-2">
        <div role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" aria-label="Uploading homepage-hero.png" class="h-1 flex-1 overflow-hidden rounded-full bg-muted border border-transparent">
          <span class="block h-full rounded-full bg-primary motion-safe:animate-pulse border border-transparent" style="width:18%"></span>
        </div>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">18%</span>
      </div>
    </div>
    <button type="button" aria-label="Cancel upload of homepage-hero.png" class="shrink-0 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </li>
  <li class="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3">
    <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file h-4 w-4" aria-hidden="true">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
      </svg>
    </span>
    <div class="min-w-0 flex-1">
      <p class="flex items-baseline justify-between gap-3">
        <span class="truncate text-sm font-medium text-card-foreground">q3-financials.xlsx</span>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">318 KB</span>
      </p>
      <p class="mt-0.5 text-xs text-muted-foreground">Queued — waiting for a slot</p>
    </div>
    <button type="button" aria-label="Cancel upload of q3-financials.xlsx" class="shrink-0 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </li>
  <li class="flex items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-4 py-3">
    <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file h-4 w-4" aria-hidden="true">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
      </svg>
    </span>
    <div class="min-w-0 flex-1">
      <p class="flex items-baseline justify-between gap-3">
        <span class="truncate text-sm font-medium text-card-foreground">launch-video-draft.mp4</span>
        <span class="shrink-0 text-xs tabular-nums text-muted-foreground">1.4 GB</span>
      </p>
      <p class="mt-0.5 text-xs text-destructive">Connection lost at 34%</p>
    </div>
    <button type="button" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1.5 text-xs font-semibold transition-colors hover:bg-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw h-3.5 w-3.5" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>Retry</button>
  </li>
</ul>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Import Data7 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in File Upload

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse File Upload

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More File Upload blocks

View category

Drag & Drop Upload

Dropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.

File Upload219 lines1 dep

Resumable Large Upload

One big file on a connection that will drop: a bar allowed to go backwards when a chunk is retried, a time estimate that is a range or nothing, and a promise about closing the tab made before it is needed.

File Upload237 lines1 dep2 Sept

customers-export.csv

1,284 rows · 6 columns found

Step 2 of 3

Full Name

Ada Lovelace · Grace Hopper

Work Email

ada@analytical.co · grace@navy.mil

One address per row

Company

Analytical Engines · US Navy

Phone

+44 20 7946 0958 · +1 202 555 0114

Signed Up

2026-03-14 · 2026-04-02

Internal Notes

do not contact

CSV Column Mapper

The screen between "file uploaded" and "data imported": source columns mapped to schema fields, with a sample value under each and required fields blocking the button.

File Upload280 lines1 dep10 Sept

Avatar Crop & Upload

Framing a profile photo with keyboard-operable zoom and position, showing what gets trimmed rather than hiding it behind the mask.

File Upload268 lines1 dep2 Sept

Send us the file

The limits are here rather than in the error you would otherwise meet after uploading. Rejecting a 400 MB file after transferring it is a failure of the form, not of the person.

Upload Requirements Form

An upload form that states the constraints before the file is chosen, rather than rejecting it after a two-minute transfer.

File Upload184 linesNo deps

Import From URL Form

The import path for a file that is already on the internet, which does not need to travel through the browser at all.

File Upload178 linesNo deps