file-upload-direct-upload-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  type FileUploadProps,
17  FileUploadTrigger,
18} from "@/registry/bases/base/ui/file-upload";
19 
20export default function FileUploadDirectUploadDemo() {
21  const [files, setFiles] = React.useState<File[]>([]);
22 
23  const onUpload: NonNullable<FileUploadProps["onUpload"]> = React.useCallback(
24    async (files, { onProgress, onSuccess, onError }) => {
25      try {
26        // Process each file individually
27        const uploadPromises = files.map(async (file) => {
28          try {
29            // Simulate file upload with progress
30            const totalChunks = 10;
31            let uploadedChunks = 0;
32 
33            // Simulate chunk upload with delays
34            for (let i = 0; i < totalChunks; i++) {
35              // Simulate network delay (100-300ms per chunk)
36              await new Promise((resolve) =>
37                setTimeout(resolve, Math.random() * 200 + 100),
38              );
39 
40              // Update progress for this specific file
41              uploadedChunks++;
42              const progress = (uploadedChunks / totalChunks) * 100;
43              onProgress(file, progress);
44            }
45 
46            // Simulate server processing delay
47            await new Promise((resolve) => setTimeout(resolve, 500));
48            onSuccess(file);
49          } catch (error) {
50            onError(
51              file,
52              error instanceof Error ? error : new Error("Upload failed"),
53            );
54          }
55        });
56 
57        // Wait for all uploads to complete
58        await Promise.all(uploadPromises);
59      } catch (error) {
60        // This handles any error that might occur outside the individual upload processes
61        console.error("Unexpected error during upload:", error);
62      }
63    },
64    [],
65  );
66 
67  const onFileReject = React.useCallback((file: File, message: string) => {
68    toast(message, {
69      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
70    });
71  }, []);
72 
73  return (
74    <FileUpload
75      value={files}
76      onValueChange={setFiles}
77      onUpload={onUpload}
78      onFileReject={onFileReject}
79      maxFiles={2}
80// … truncated