"use client"; import { Check, File, FileImage, FileText, Loader2, Upload, X, } from "lucide-react"; import Image from "next/image"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Progress } from "@/registry/new-york/ui/progress"; 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"; } interface FileUploadErrorProps { message: string; onDismiss?: () => void; } function FileUploadError({ message, onDismiss }: FileUploadErrorProps) { return (

); } interface FileUploadDropzoneProps { acceptedTypes: string[]; maxSize?: number; maxFiles?: number; isDragging: boolean; onDragOver: (e: React.DragEvent) => void; onDragLeave: (e: React.DragEvent) => void; onDrop: (e: React.DragEvent) => void; onClick: () => void; onFileInputChange: (e: React.ChangeEvent) => void; fileInputRef: React.RefObject; } function FileUploadDropzone({ acceptedTypes, maxSize, maxFiles, isDragging, onDragOver, onDragLeave, onDrop, onClick, onFileInputChange, fileInputRef, }: FileUploadDropzoneProps) { const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }, [onClick] ); return ( 1 : true} onChange={onFileInputChange} ref={fileInputRef} type="file" />

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

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

); } interface FileUploadItemProps { uploadedFile: UploadedFile; showPreview: boolean; processingStatus?: Record; error?: string; onRemove?: (fileId: string) => void; } function FileUploadItem({ uploadedFile, showPreview, processingStatus, error, onRemove, }: FileUploadItemProps) { const status = processingStatus?.[uploadedFile.id] || uploadedFile.status; const fileError = error || uploadedFile.error; const isUploading = status === "uploading"; const isCompleted = status === "completed"; const isError = status === "error"; return (

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

) : (

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

)}

{uploadedFile.file.name}

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

{isUploading && ( )} {isCompleted && ( )} {isError && ( )} {onRemove && ( )}

{uploadedFile.progress !== undefined && isUploading && ( )} {fileError && (

{fileError}

)}

); } interface FileUploadEmptyStateProps { maxFiles: number; } function FileUploadEmptyState({ maxFiles }: FileUploadEmptyStateProps) { return (

Maximum files reached ({maxFiles})

); } 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 errorTimeoutRef = useRef(undefined); 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 (errorTimeoutRef.current) { clearTimeout(errorTimeoutRef.current); } errorTimeoutRef.current = setTimeout(() => { setErrors((prev) => { const next = { ...prev }; delete next._general; return next; }); }, 5000); } 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.`; setErrors(newErrors); } 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(); const relatedTarget = e.relatedTarget as HTMLElement; if (!e.currentTarget.contains(relatedTarget)) { 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 = useCallback(() => { fileInputRef.current?.click(); }, []); const handleDismissError = useCallback(() => { setErrors((prev) => { const next = { ...prev }; delete next._general; return next; }); }, []); useEffect( () => () => { if (errorTimeoutRef.current) { clearTimeout(errorTimeoutRef.current); } }, [] ); const canAddMore = uploadedFiles.length < maxFiles; return (

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

{canAddMore && ( )} {errors._general && ( )} {uploadedFiles.length > 0 && (

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

{canAddMore && ( )}

{uploadedFiles.map((uploadedFile) => ( ))}

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

); }

Example Usage