file-upload-chat-input-demo

1"use client";
2 
3import { ArrowUp, Paperclip, 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";
19import { Textarea } from "@/registry/bases/base/ui/textarea";
20 
21export default function FileUploadChatInputDemo() {
22  const [input, setInput] = React.useState("");
23  const [files, setFiles] = React.useState<File[]>([]);
24  const [isUploading, setIsUploading] = React.useState(false);
25 
26  const onInputChange = React.useCallback(
27    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
28      setInput(event.target.value);
29    },
30    [],
31  );
32 
33  const onUpload: NonNullable<FileUploadProps["onUpload"]> = React.useCallback(
34    async (files, { onProgress, onSuccess, onError }) => {
35      try {
36        setIsUploading(true);
37        // Process each file individually
38        const uploadPromises = files.map(async (file) => {
39          try {
40            // Simulate file upload with progress
41            const totalChunks = 10;
42            let uploadedChunks = 0;
43 
44            // Simulate chunk upload with delays
45            for (let i = 0; i < totalChunks; i++) {
46              // Simulate network delay (100-300ms per chunk)
47              await new Promise((resolve) =>
48                setTimeout(resolve, Math.random() * 200 + 100),
49              );
50 
51              // Update progress for this specific file
52              uploadedChunks++;
53              const progress = (uploadedChunks / totalChunks) * 100;
54              onProgress(file, progress);
55            }
56 
57            // Simulate server processing delay
58            await new Promise((resolve) => setTimeout(resolve, 500));
59            onSuccess(file);
60          } catch (error) {
61            onError(
62              file,
63              error instanceof Error ? error : new Error("Upload failed"),
64            );
65          } finally {
66            setIsUploading(false);
67          }
68        });
69 
70        // Wait for all uploads to complete
71        await Promise.all(uploadPromises);
72      } catch (error) {
73        // This handles any error that might occur outside the individual upload processes
74        console.error("Unexpected error during upload:", error);
75// … truncated