file-upload-circular-progress-demo

1"use client";
2 
3import { Upload, X } from "lucide-react";
4import * as React from "react";
5import { toast } from "sonner";
6import { Button } from "@/registry/bases/base/ui/button";
7import {
8  FileUpload,
9  FileUploadDropzone,
10  FileUploadItem,
11  FileUploadItemDelete,
12  FileUploadItemMetadata,
13  FileUploadItemPreview,
14  FileUploadItemProgress,
15  FileUploadList,
16  FileUploadTrigger,
17} from "@/registry/bases/base/ui/file-upload";
18 
19export default function FileUploadCircularProgressDemo() {
20  const [files, setFiles] = React.useState<File[]>([]);
21 
22  const onUpload = React.useCallback(
23    async (
24      files: File[],
25      {
26        onProgress,
27        onSuccess,
28        onError,
29      }: {
30        onProgress: (file: File, progress: number) => void;
31        onSuccess: (file: File) => void;
32        onError: (file: File, error: Error) => void;
33      },
34    ) => {
35      try {
36        // Process each file individually
37        const uploadPromises = files.map(async (file) => {
38          try {
39            // Simulate file upload with progress
40            const totalChunks = 10;
41            let uploadedChunks = 0;
42 
43            // Simulate chunk upload with delays
44            for (let i = 0; i < totalChunks; i++) {
45              // Simulate network delay (100-300ms per chunk)
46              await new Promise((resolve) =>
47                setTimeout(resolve, Math.random() * 200 + 100),
48              );
49 
50              // Update progress for this specific file
51              uploadedChunks++;
52              const progress = (uploadedChunks / totalChunks) * 100;
53              onProgress(file, progress);
54            }
55 
56            // Simulate server processing delay
57            await new Promise((resolve) => setTimeout(resolve, 500));
58            onSuccess(file);
59          } catch (error) {
60            onError(
61              file,
62              error instanceof Error ? error : new Error("Upload failed"),
63            );
64          }
65        });
66 
67        // Wait for all uploads to complete
68        await Promise.all(uploadPromises);
69      } catch (error) {
70        // This handles any error that might occur outside the individual upload processes
71        console.error("Unexpected error during upload:", error);
72      }
73    },
74    [],
75  );
76 
77  const onFileReject = React.useCallback((file: File, message: string) => {
78    toast(message, {
79      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
80    });
81  }, []);
82 
83  return (
84// … truncated