Upload Queue

Component

About

A floating or inline panel that tracks every file upload in progress, showing per-file progress, pause/resume/cancel/retry controls, and a byte-weighted overall percentage, collapsible to a small pill.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Upload Queue to your project and fits it to your theme.

Code

How Upload Queue is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import UploadQueue from "@/components/ui/upload-queue";
import type { UploadQueueFile } from "@/components/ui/upload-queue";

const initialFiles: UploadQueueFile[] = [
  {
    id: "1",
    name: "Q3 board deck.pdf",
    size: 18_200_000,
    progress: 0.12,
    status: "uploading",
  },
  {
    id: "2",
    name: "product-demo-final.mp4",
    size: 202_000_000,
    progress: 0.04,
    status: "uploading",
  },
  {
    id: "3",
    name: "customer-interviews.zip",
    size: 9_600_000,
    progress: 0.31,
    status: "error",
    error: "Connection lost at 31%",
  },
  { id: "4", name: "logo@2x.png", size: 180_000, progress: 1, status: "done" },
  {
    id: "5",
    name: "pricing-sheet.xlsx",
    size: 899_000,
    progress: 0,
    status: "queued",
  },
];

export default function UploadQueueDemo() {
  const [files, setFiles] = React.useState<UploadQueueFile[]>(initialFiles);

  return (
    <div className="flex w-full items-center justify-center bg-[var(--color-canvas)] p-10 text-[var(--color-ink)]">
      <div className="w-[380px]">
        <UploadQueue
          files={files}
          label="Project uploads"
          onPause={(id: string) =>
            setFiles((prev) =>
              prev.map((f) => (f.id === id ? { ...f, status: "paused" } : f)),
            )
          }
          onResume={(id: string) =>
            setFiles((prev) =>
              prev.map((f) =>
                f.id === id ? { ...f, status: "uploading" } : f,
              ),
            )
          }
          onCancel={(id: string) =>
            setFiles((prev) => prev.filter((f) => f.id !== id))
          }
          onRetry={(id: string) =>
            setFiles((prev) =>
              prev.map((f) =>
                f.id === id
                  ? { ...f, status: "uploading", progress: 0, error: undefined }
                  : f,
              ),
            )
          }
          onClearCompleted={() =>
            setFiles((prev) => prev.filter((f) => f.status !== "done"))
          }
        />
      </div>
    </div>
  );
}