"use client"; import { Check, File, FileImage, FileText, Loader2, Upload, X, } from "lucide-react"; import Image from "next/image"; import { useCallback, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; export interface UploadedFile { id: string; file: File; preview?: string; status: "uploading" | "processing" | "completed" | "error"; progress?: number; error?: string; } export interface AIFileUploadProps { onFilesSelected?: (files: File[]) => void; onFileRemove?: (fileId: string) => void; uploadedFiles?: UploadedFile[]; acceptedTypes?: string[]; maxSize?: number; maxFiles?: number; className?: string; showPreview?: boolean; processingStatus?: Record; } function formatFileSize(bytes: number): string { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`; } function getFileIcon(type: string) { if (type.startsWith("image/")) { return FileImage; } if ( type.includes("text") || type.includes("document") || type.includes("pdf") ) { return FileText; } return File; } function getFileTypeLabel(type: string): string { if (type.startsWith("image/")) { return "Image"; } if (type.includes("pdf")) { return "PDF"; } if (type.includes("text")) { return "Text"; } if ( type.includes("code") || type.includes("javascript") || type.includes("typescript") ) { return "Code"; } return "File"; } export default function AIFileUpload({ onFilesSelected, onFileRemove, uploadedFiles = [], acceptedTypes = ["image/*", "application/pdf", "text/*"], maxSize = 10 * 1024 * 1024, maxFiles = 10, className, showPreview = true, processingStatus, }: AIFileUploadProps) { const [isDragging, setIsDragging] = useState(false); const [errors, setErrors] = useState>({}); const fileInputRef = useRef(null); const validateFile = useCallback( (file: File): string | null => { if (maxSize && file.size > maxSize) { return `File size exceeds ${formatFileSize(maxSize)}`; } if (acceptedTypes.length > 0) { const isAccepted = acceptedTypes.some((type) => { if (type.endsWith("/*")) { return file.type.startsWith(type.slice(0, -2)); } return file.type === type; }); if (!isAccepted) { return `File type not supported. Accepted types: ${acceptedTypes.join(", ")}`; } } return null; }, [maxSize, acceptedTypes] ); const handleFiles = useCallback( (files: FileList | null) => { if (!files || files.length === 0) return; const fileArray = Array.from(files); const validFiles: File[] = []; const newErrors: Record = {}; fileArray.forEach((file) => { const error = validateFile(file); if (error) { newErrors[file.name] = error; } else { validFiles.push(file); } }); if (Object.keys(newErrors).length > 0) { setErrors(newErrors); } if (validFiles.length > 0) { const remainingSlots = maxFiles - uploadedFiles.length; const filesToAdd = validFiles.slice(0, remainingSlots); if (filesToAdd.length < validFiles.length) { const skipped = validFiles.length - filesToAdd.length; newErrors["_general"] = `${skipped} file${skipped !== 1 ? "s" : ""} skipped. Maximum ${maxFiles} files allowed.`; } onFilesSelected?.(filesToAdd); } if (fileInputRef.current) { fileInputRef.current.value = ""; } }, [maxFiles, uploadedFiles.length, onFilesSelected, validateFile] ); const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); }, []); const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); }, []); const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); if (uploadedFiles.length >= maxFiles) { setErrors({ _general: `Maximum ${maxFiles} files allowed`, }); return; } handleFiles(e.dataTransfer.files); }, [handleFiles, maxFiles, uploadedFiles.length] ); const handleFileInputChange = useCallback( (e: React.ChangeEvent) => { handleFiles(e.target.files); }, [handleFiles] ); const handleClick = () => { fileInputRef.current?.click(); }; const canAddMore = uploadedFiles.length < maxFiles; return (

Upload Files Upload images, documents, or code files for AI analysis

{canAddMore && (

Drag and drop files here, or{" "} click to browse

Accepted: {acceptedTypes.join(", ")} {maxSize && ` • Max size: ${formatFileSize(maxSize)}`} {maxFiles && ` • Max files: ${maxFiles}`}

1} onChange={handleFileInputChange} ref={fileInputRef} type="file" />

)} {errors._general && (

{errors._general}

)} {uploadedFiles.length > 0 && (

Uploaded Files ({uploadedFiles.length} {maxFiles && ` / ${maxFiles}`})

{canAddMore && ( )}

{uploadedFiles.map((uploadedFile) => { const Icon = getFileIcon(uploadedFile.file.type); const status = processingStatus?.[uploadedFile.id] || uploadedFile.status; const fileError = errors[uploadedFile.file.name] || uploadedFile.error; return (

{showPreview && uploadedFile.preview && uploadedFile.file.type.startsWith("image/") ? (

) : (

)}

{uploadedFile.file.name}

{getFileTypeLabel(uploadedFile.file.type)} {formatFileSize(uploadedFile.file.size)}

{status === "uploading" && ( )} {status === "completed" && ( )} {status === "error" && ( )} {onFileRemove && ( )}

{uploadedFile.progress !== undefined && status === "uploading" && ( )} {fileError && (

{fileError}

)}

); })}

)} {uploadedFiles.length === 0 && !canAddMore && (

Maximum files reached ({maxFiles})

)}

); }

Example Usage