Timeline Upload Demo

Installation

Usage

import { TimelineUpload } from "@/components/ruixen/timeline-upload";
 
const uploadFiles = [
  {
    id: "1",
    file: new File([""], "document.pdf", { type: "application/pdf" }),
    progress: 100,
    status: "done" as const,
  },
  {
    id: "2",
    file: new File([""], "image.jpg", { type: "image/jpeg" }),
    progress: 45,
    status: "uploading" as const,
  },
];
 
export default function App() {
  const handleRemove = (id: string) => {
    console.log("Remove file:", id);
  };
 
  return <TimelineUpload files={uploadFiles} onRemove={handleRemove} />;
}

Props

Prop	Type	Default	Description
`files`	`UploadFile[]`	-	Array of files to display
`onRemove`	`(id: string) => void`	-	Callback when file is removed

Features

Timeline Layout: Vertical timeline with connecting lines
Status Icons: Visual indicators (circle for uploading, checkmark for done)
Progress Bars: Show upload progress for active files
File Emojis: File type indicators with emojis
Remove Action: Delete files with trash icon
Status Labels: "Uploading..." and "Completed" text

File Type

export type UploadFile = {
  id: string;
  file: File;
  progress: number;
  status: "uploading" | "done";
};