Upload File Illustration

"use client"; /** * @author: @dorian_baffier * @description: File Upload * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://clumpui.amardeep.space * @github: https://github.com/kokonut-labs/kokonutui */ import { useState, useRef, useCallback, type DragEvent, useEffect, } from "react"; import { motion, AnimatePresence } from "motion/react"; import { UploadCloud, File as FileIcon } from "lucide-react"; import { cn } from "@/lib/utils"; type FileStatus = "idle" | "dragging" | "uploading" | "error"; interface FileError { message: string; code: string; } interface FileUploadProps { onUploadSuccess?: (file: File) => void; onUploadError?: (error: FileError) => void; acceptedFileTypes?: string[]; maxFileSize?: number; currentFile?: File | null; onFileRemove?: () => void; /** Duration in milliseconds for the upload simulation. Defaults to 2000ms (2s), 0 for no simulation */ uploadDelay?: number; validateFile?: (file: File) => FileError | null; className?: string; } const DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB const UPLOAD_STEP_SIZE = 5; const FILE_SIZES = [ "Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB", ] as const; const formatBytes = (bytes: number, decimals = 2): string => { if (!+bytes) return "0 Bytes"; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const i = Math.floor(Math.log(bytes) / Math.log(k)); const unit = FILE_SIZES[i] || FILE_SIZES[FILE_SIZES.length - 1]; return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${unit}`; }; const UploadIllustration = () => (

); const UploadingAnimation = ({ progress }: { progress: number }) => (

); export default function FileUpload({ onUploadSuccess = () => {}, onUploadError = () => {}, acceptedFileTypes = [], maxFileSize = DEFAULT_MAX_FILE_SIZE, currentFile: initialFile = null, onFileRemove = () => {}, uploadDelay = 2000, validateFile = () => null, className, }: FileUploadProps) { const [file, setFile] = useState(initialFile); const [status, setStatus] = useState("idle"); const [progress, setProgress] = useState(0); const [error, setError] = useState(null); const fileInputRef = useRef(null); const uploadIntervalRef = useRef(null); useEffect(() => { return () => { if (uploadIntervalRef.current) { clearInterval(uploadIntervalRef.current); } }; }, []); const validateFileSize = useCallback( (file: File): FileError | null => { if (file.size > maxFileSize) { return { message: `File size exceeds ${formatBytes(maxFileSize)}`, code: "FILE_TOO_LARGE", }; } return null; }, [maxFileSize] ); const validateFileType = useCallback( (file: File): FileError | null => { if (!acceptedFileTypes?.length) return null; const fileType = file.type.toLowerCase(); if ( !acceptedFileTypes.some((type) => fileType.match(type.toLowerCase()) ) ) { return { message: `File type must be ${acceptedFileTypes.join( ", " )}`, code: "INVALID_FILE_TYPE", }; } return null; }, [acceptedFileTypes] ); const handleError = useCallback( (error: FileError) => { setError(error); setStatus("error"); onUploadError?.(error); setTimeout(() => { setError(null); setStatus("idle"); }, 3000); }, [onUploadError] ); const simulateUpload = useCallback( (uploadingFile: File) => { let currentProgress = 0; if (uploadIntervalRef.current) { clearInterval(uploadIntervalRef.current); } uploadIntervalRef.current = setInterval(() => { currentProgress += UPLOAD_STEP_SIZE; if (currentProgress >= 100) { if (uploadIntervalRef.current) { clearInterval(uploadIntervalRef.current); } setProgress(0); setStatus("idle"); setFile(null); onUploadSuccess?.(uploadingFile); } else { setStatus((prevStatus) => { if (prevStatus === "uploading") { setProgress(currentProgress); return "uploading"; } if (uploadIntervalRef.current) { clearInterval(uploadIntervalRef.current); } return prevStatus; }); } }, uploadDelay / (100 / UPLOAD_STEP_SIZE)); }, [onUploadSuccess, uploadDelay] ); const handleFileSelect = useCallback( (selectedFile: File | null) => { if (!selectedFile) return; // Reset error state setError(null); // Validate file const sizeError = validateFileSize(selectedFile); if (sizeError) { handleError(sizeError); return; } const typeError = validateFileType(selectedFile); if (typeError) { handleError(typeError); return; } const customError = validateFile?.(selectedFile); if (customError) { handleError(customError); return; } setFile(selectedFile); setStatus("uploading"); setProgress(0); simulateUpload(selectedFile); }, [ simulateUpload, validateFileSize, validateFileType, validateFile, handleError, ] ); const handleDragOver = useCallback((e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setStatus((prev) => (prev !== "uploading" ? "dragging" : prev)); }, []); const handleDragLeave = useCallback((e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setStatus((prev) => (prev === "dragging" ? "idle" : prev)); }, []); const handleDrop = useCallback( (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (status === "uploading") return; setStatus("idle"); const droppedFile = e.dataTransfer.files?.[0]; if (droppedFile) handleFileSelect(droppedFile); }, [status, handleFileSelect] ); const handleFileInputChange = useCallback( (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0]; handleFileSelect(selectedFile || null); if (e.target) e.target.value = ""; }, [handleFileSelect] ); const triggerFileInput = useCallback(() => { if (status === "uploading") return; fileInputRef.current?.click(); }, [status]); const resetState = useCallback(() => { setFile(null); setStatus("idle"); setProgress(0); if (onFileRemove) onFileRemove(); }, [onFileRemove]); return (

Drag and drop or

{file?.name}