"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, FileIcon, ImageIcon, PauseIcon, PlayIcon, RotateCwIcon, UploadIcon, VideoIcon, XIcon } from "@kineticui/icons"; export type UploadItem = { id: string; file: File; progress: number; status: "queued" | "uploading" | "paused" | "done" | "error"; error?: string; speed?: number }; export type UploadQueueProps = { /** * Upload one file. Report progress with onProgress(0–1); honour signal.aborted to pause/cancel. * Throw to mark as failed. */ upload: (file: File, onProgress: (p: number) => void, signal: AbortSignal) => Promise; /** Parallel uploads. */ concurrency?: number; accept?: string; maxSizeMB?: number; onComplete?: (files: File[]) => void; className?: string; }; const fmt = (n: number) => (n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1048576).toFixed(1)} MB`); const iconFor = (f: File) => (f.type.startsWith("image/") ? : f.type.startsWith("video/") ? : ); /** Drop zone + upload queue with concurrency, per-file progress and speed, pause/resume, retry, cancel and totals. */ export function UploadQueue({ upload, concurrency = 2, accept, maxSizeMB = 100, onComplete, className }: UploadQueueProps) { const [items, setItems] = React.useState([]); const [drag, setDrag] = React.useState(false); const controllers = React.useRef(new Map()); const input = React.useRef(null); const patch = (id: string, p: Partial) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, ...p } : x))); const add = (files: FileList | File[]) => { const next = Array.from(files).map((file) => ({ id: Math.random().toString(36).slice(2), file, progress: 0, status: file.size > maxSizeMB * 1048576 ? "error" : "queued", error: file.size > maxSizeMB * 1048576 ? `Larger than ${maxSizeMB} MB` : undefined, })); setItems((xs) => [...xs, ...next]); }; // Scheduler: start queued items while under the concurrency limit. React.useEffect(() => { const active = items.filter((i) => i.status === "uploading").length; const queued = items.filter((i) => i.status === "queued").slice(0, Math.max(0, concurrency - active)); for (const it of queued) { const ac = new AbortController(); controllers.current.set(it.id, ac); patch(it.id, { status: "uploading" }); const start = Date.now(); const startP = it.progress; upload( it.file, (p) => { if (ac.signal.aborted) return; const secs = (Date.now() - start) / 1000; patch(it.id, { progress: p, speed: secs > 0.2 ? ((p - startP) * it.file.size) / secs : undefined }); }, ac.signal, ).then( () => !ac.signal.aborted && patch(it.id, { status: "done", progress: 1 }), (e: unknown) => !ac.signal.aborted && patch(it.id, { status: "error", error: e instanceof Error ? e.message : "Upload failed" }), ); } if (items.length && items.every((i) => i.status === "done")) onComplete?.(items.map((i) => i.file)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [items, concurrency]); const pause = (id: string) => { controllers.current.get(id)?.abort(); patch(id, { status: "paused", speed: undefined }); }; const remove = (id: string) => { controllers.current.get(id)?.abort(); setItems((xs) => xs.filter((x) => x.id !== id)); }; const total = items.reduce((a, i) => a + i.file.size, 0); const sent = items.reduce((a, i) => a + i.file.size * i.progress, 0); const doneCount = items.filter((i) => i.status === "done").length; return (

{ if (e.target.files) add(e.target.files); e.target.value = ""; }} /> {items.length ? (

{doneCount}/{items.length} uploaded {fmt(sent)} / {fmt(total)}

) : null}

{items.map((it) => ( {iconFor(it.file)}

{it.file.name} {it.status === "error" ? it.error : it.status === "done" ? `${fmt(it.file.size)} · done` : it.status === "paused" ? `Paused at ${Math.round(it.progress * 100)}%` : it.status === "queued" ? "Waiting…" : `${Math.round(it.progress * 100)}% · ${it.speed ? `${fmt(it.speed)}/s` : "starting"}`}

{it.status === "uploading" ? : null} {it.status === "paused" ? : null} {it.status === "error" && it.file.size <= maxSizeMB * 1048576 ? : null} {it.status === "done" ? : } ))}

); }

Upload Queue

Installation

Exports