50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T5fd7,"use client"; /** * @author: @dorianbaffier * @description: File Upload * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { UploadCloud } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type DragEvent, useCallback, useEffect, useId, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; type FileStatus = "idle" | "dragging" | "uploading" | "error"; interface FileError { message: string; code: string; } interface UploadHelpers { /** Report upload progress from 0 to 100. */ onProgress: (percent: number) => void; /** Aborted when the user cancels or the component unmounts. */ signal: AbortSignal; } interface FileUploadProps { /** * Performs the real upload. Resolve to report success, reject to report an * error. When omitted, the upload is simulated over `uploadDelay`. */ onUpload?: (file: File, helpers: UploadHelpers) => Promise; onUploadSuccess?: (file: File) => void; onUploadError?: (error: FileError) => void; acceptedFileTypes?: string[]; maxFileSize?: number; currentFile?: File | null; onFileRemove?: () => void; /** Duration in milliseconds of the simulated upload used without `onUpload`. Defaults to 2000ms; 0 completes immediately. */ uploadDelay?: number; validateFile?: (file: File) => FileError | null; className?: string; } const DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB const UPLOAD_STEP_SIZE = 5; const ERROR_RESET_DELAY = 3000; const PROGRESS_MASK_RADIUS = 60; const PROGRESS_MASK_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_MASK_RADIUS; const FILE_SIZES = [ "Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB", ] as const; // Accepts exact MIME types ("image/png"), wildcards ("image/*") and // extensions (".pdf"), like the input's `accept` attribute. const matchesAcceptedType = (file: File, acceptedType: string): boolean => { const accepted = acceptedType.trim().toLowerCase(); if (!accepted) { return false; } if (accepted.startsWith(".")) { return file.name.toLowerCase().endsWith(accepted); } const fileType = file.type.toLowerCase(); if (accepted.endsWith("/*")) { return fileType.startsWith(accepted.slice(0, -1)); } return fileType === accepted; }; // Labels for the hint line: ".pdf" -> "PDF", "image/svg+xml" -> "SVG", // "image/*" -> "any image". const describeAcceptedType = (acceptedType: string): string => { const accepted = acceptedType.trim(); if (accepted.startsWith(".")) { return accepted.slice(1).toUpperCase(); } const [kind = "", subtype = ""] = accepted.split("/"); if (subtype === "*") { return `any ${kind.toLowerCase()}`; } return subtype.split("+")[0].toUpperCase(); }; const describeAcceptedTypes = (acceptedTypes: string[]): string => { const labels = acceptedTypes.map(describeAcceptedType).filter(Boolean); const text = labels.length ? labels.join(", ") : "any file"; return text.charAt(0).toUpperCase() + text.slice(1); }; const clampProgress = (value: number) => Math.min(Math.max(value, 0), 100); // Module constant, so the default does not change identity every render. const NO_ACCEPTED_TYPES: string[] = []; 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.at(-1); return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${unit}`; }; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // The illustration rests on its first frame and only bobs while a file is // dragged over the card. SMIL ignores prefers-reduced-motion, so that is // checked here too. Pausing happens in an effect, so markup is unaffected. const UploadIllustration = ({ animate }: { animate: boolean }) => { const svgRef = useRef(null); const shouldReduceMotion = useReducedMotion(); useEffect(() => { const svg = svgRef.current; if (!svg) { return; } if (animate && !shouldReduceMotion) { svg.unpauseAnimations(); } else { svg.pauseAnimations(); svg.setCurrentTime(0); } }, [animate, shouldReduceMotion]); return (

); }; // Concentric rings that spin in alternating directions, phase-shifted by a // short delay. The progress mask reveals them as the upload advances. const PROGRESS_RINGS = [ { r: 120, stroke: "#FF3D71", delay: 0 }, { r: 110, stroke: "#4ADE80", delay: 0.2 }, { r: 100, stroke: "#2196F3", delay: 0.3 }, { r: 90, stroke: "#FFA726", delay: 0.2 }, { r: 80, stroke: "#FF1493", delay: 0.5 }, { r: 70, stroke: "#FFEB3B", delay: 0.3 }, { r: 60, stroke: "#00BCD4", delay: 0.7 }, { r: 50, stroke: "#FF4081", delay: 0.2 }, { r: 40, stroke: "#76FF03", delay: 0.3 }, { r: 30, stroke: "#448AFF", delay: 0.5 }, { r: 20, stroke: "#FF3D00", delay: 0 }, ] as const; const UploadingAnimation = ({ progress, maskId, }: { progress: number; maskId: string; }) => (

); export default function FileUpload({ onUpload, onUploadSuccess, onUploadError, acceptedFileTypes = NO_ACCEPTED_TYPES, maxFileSize = DEFAULT_MAX_FILE_SIZE, currentFile: initialFile = null, onFileRemove, uploadDelay = 2000, validateFile, 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 progressMaskId = useId(); const uploadIntervalRef = useRef | null>(null); const uploadAbortRef = useRef(null); const errorTimeoutRef = useRef | null>(null); const clearUploadInterval = useCallback(() => { if (uploadIntervalRef.current) { clearInterval(uploadIntervalRef.current); uploadIntervalRef.current = null; } }, []); const cancelUpload = useCallback(() => { clearUploadInterval(); uploadAbortRef.current?.abort(); uploadAbortRef.current = null; }, [clearUploadInterval]); const clearErrorTimeout = useCallback(() => { if (errorTimeoutRef.current) { clearTimeout(errorTimeoutRef.current); errorTimeoutRef.current = null; } }, []); useEffect( () => () => { cancelUpload(); clearErrorTimeout(); }, [cancelUpload, clearErrorTimeout] ); 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; } if (!acceptedFileTypes.some((type) => matchesAcceptedType(file, type))) { return { message: `File type must be ${acceptedFileTypes.join(", ")}`, code: "INVALID_FILE_TYPE", }; } return null; }, [acceptedFileTypes] ); const handleError = useCallback( (error: FileError) => { clearErrorTimeout(); setError(error); setStatus("error"); onUploadError?.(error); errorTimeoutRef.current = setTimeout(() => { errorTimeoutRef.current = null; setError(null); setStatus("idle"); }, ERROR_RESET_DELAY); }, [clearErrorTimeout, onUploadError] ); const startUpload = useCallback( (uploadingFile: File) => { cancelUpload(); const controller = new AbortController(); uploadAbortRef.current = controller; // Never report success for an upload that was cancelled or replaced. const completeUpload = () => { if (controller.signal.aborted) { return; } uploadAbortRef.current = null; setProgress(0); setStatus("idle"); setFile(null); onUploadSuccess?.(uploadingFile); }; const failUpload = (uploadError: unknown) => { if (controller.signal.aborted) { return; } uploadAbortRef.current = null; handleError({ message: uploadError instanceof Error && uploadError.message ? uploadError.message : "Upload failed", code: "UPLOAD_FAILED", }); }; if (onUpload) { const onProgress = (percent: number) => { if (!controller.signal.aborted) { setProgress(clampProgress(percent)); } }; Promise.resolve() .then(() => onUpload(uploadingFile, { onProgress, signal: controller.signal }) ) .then(completeUpload, failUpload); return; } // Demo fallback: simulate an upload over `uploadDelay`. if (uploadDelay <= 0) { completeUpload(); return; } let currentProgress = 0; uploadIntervalRef.current = setInterval( () => { currentProgress += UPLOAD_STEP_SIZE; if (currentProgress >= 100) { clearUploadInterval(); completeUpload(); } else { setProgress(currentProgress); } }, uploadDelay / (100 / UPLOAD_STEP_SIZE) ); }, [ cancelUpload, clearUploadInterval, handleError, onUpload, onUploadSuccess, uploadDelay, ] ); const handleFileSelect = useCallback( (selectedFile: File | null) => { if (!selectedFile) { return; } // Reset error state clearErrorTimeout(); setError(null); 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); startUpload(selectedFile); }, [ clearErrorTimeout, startUpload, validateFileSize, validateFileType, validateFile, handleError, ] ); // The drag handlers sit on the always-mounted card so `preventDefault` runs // in every state; otherwise dropping during an upload makes the browser // open the file. The drop zone stays usable while an error shows. const canDrop = status !== "uploading"; const handleDragOver = useCallback( (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = canDrop ? "copy" : "none"; if (status === "idle" || status === "error") { setStatus("dragging"); } }, [canDrop, status] ); const handleDragLeave = useCallback((e: DragEvent) => { e.preventDefault(); e.stopPropagation(); // Moving onto a child element also fires dragleave; ignore it. if ( e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget) ) { return; } setStatus((prev) => (prev === "dragging" ? "idle" : prev)); }, []); const handleDrop = useCallback( (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (!canDrop) { return; } setStatus("idle"); const droppedFile = e.dataTransfer.files?.[0]; if (droppedFile) { handleFileSelect(droppedFile); } }, [canDrop, 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(() => { cancelUpload(); setFile(null); setStatus("idle"); setProgress(0); onFileRemove?.(); }, [cancelUpload, onFileRemove]); return (

{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/noNoninteractiveElementInteractions: pointer drop target; keyboard users have the Upload File button */}

{status !== "uploading" && (

Drag and drop or

{describeAcceptedTypes(acceptedFileTypes)} {maxFileSize > 0 && Number.isFinite(maxFileSize) && ` up to ${formatBytes(maxFileSize)}`}

{/* The error replaces this line, so the drop zone stays usable and the layout does not shift. */} {error ? (

{error.message}

) : (

or drag and drop your file here

)} {/* Hidden: the Upload File button opens it, so it adds no extra tab stop. */} )} {status === "uploading" && (

{file?.name}

{formatBytes(file?.size || 0)} {Math.round(progress)}%

)}

); } FileUpload.displayName = "FileUpload"; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/file-upload.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]