File Upload

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: File Upload
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { UploadCloud } from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import {
16  type DragEvent,
17  useCallback,
18  useEffect,
19  useRef,
20  useState,
21} from "react";
22import { cn } from "@/lib/utils";
23 
24type FileStatus = "idle" | "dragging" | "uploading" | "error";
25 
26interface FileError {
27  message: string;
28  code: string;
29}
30 
31interface FileUploadProps {
32  onUploadSuccess?: (file: File) => void;
33  onUploadError?: (error: FileError) => void;
34  acceptedFileTypes?: string[];
35  maxFileSize?: number;
36  currentFile?: File | null;
37  onFileRemove?: () => void;
38  /** Duration in milliseconds for the upload simulation. Defaults to 2000ms (2s), 0 for no simulation */
39  uploadDelay?: number;
40  validateFile?: (file: File) => FileError | null;
41  className?: string;
42}
43 
44const DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
45const UPLOAD_STEP_SIZE = 5;
46const FILE_SIZES = [
47  "Bytes",
48  "KB",
49  "MB",
50  "GB",
51  "TB",
52  "PB",
53  "EB",
54  "ZB",
55  "YB",
56] as const;
57 
58const formatBytes = (bytes: number, decimals = 2): string => {
59  if (!+bytes) return "0 Bytes";
60  const k = 1024;
61  const dm = decimals < 0 ? 0 : decimals;
62  const i = Math.floor(Math.log(bytes) / Math.log(k));
63  const unit = FILE_SIZES[i] || FILE_SIZES[FILE_SIZES.length - 1];
64  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${unit}`;
65};
66 
67const UploadIllustration = () => (
68  <div className="relative h-16 w-16">
69    <svg
70      aria-label="Upload illustration"
71      className="h-full w-full"
72      fill="none"
73      viewBox="0 0 100 100"
74      xmlns="http://www.w3.org/2000/svg"
75    >
76      <title>Upload File Illustration</title>
77      <circle
78        className="stroke-gray-200 dark:stroke-gray-700"
79        cx="50"
80        cy="50"
81        r="45"
82        strokeDasharray="4 4"
83        strokeWidth="2"
84      >
85        <animateTransform
86          attributeName="transform"
87          dur="60s"
88          from="0 50 50"
89          repeatCount="indefinite"
90          to="360 50 50"
91          type="rotate"
92        />
93      </circle>
94 
95      <path
96        className="fill-blue-100 stroke-blue-500 dark:fill-blue-900/30 dark:stroke-blue-400"
97        d="M30 35H70C75 35 75 40 75 40V65C75 70 70 70 70 70H30C25 70 25 65 25 65V40C25 35 30 35 30 35Z"
98        strokeWidth="2"
99      >
100// … truncated