UploadProgress
File upload progress tracker with status icons per file
Preview
report.pdf
data.xlsx
image.png
File too large
Usage
import {
UploadProgress,
type UploadFileState,
} from "@/components/ui/upload-progress"
const files: UploadFileState[] = [
{ id: "1", filename: "report.pdf", title: "report", status: "completed", progress: 100 },
{ id: "2", filename: "data.xlsx", title: "data", status: "uploading", progress: 45 },
{ id: "3", filename: "image.png", title: "image", status: "failed", progress: 0, error: "File too large" },
{ id: "4", filename: "notes.docx", title: "notes", status: "pending", progress: 0 },
]
<UploadProgress files={files} />Each file shows a status icon (spinner for uploading, checkmark for completed, X for failed, file icon for pending), the filename, and a progress bar when uploading. Failed files display their error message. Use maxHeight to constrain the scrollable area.
Install
npx shadcn add @bonsai/upload-progress