File Upload

1"use client"
2 
3import { cn } from "@/lib/utils"
4import {
5  Children,
6  cloneElement,
7  createContext,
8  useCallback,
9  useContext,
10  useEffect,
11  useRef,
12  useState,
13} from "react"
14import { createPortal } from "react-dom"
15 
16type FileUploadContextValue = {
17  isDragging: boolean
18  inputRef: React.RefObject<HTMLInputElement | null>
19  multiple?: boolean
20  disabled?: boolean
21}
22 
23const FileUploadContext = createContext<FileUploadContextValue | null>(null)
24 
25export type FileUploadProps = {
26  onFilesAdded: (files: File[]) => void
27  children: React.ReactNode
28  multiple?: boolean
29  accept?: string
30  disabled?: boolean
31}
32 
33function FileUpload({
34  onFilesAdded,
35  children,
36  multiple = true,
37  accept,
38  disabled = false,
39}: FileUploadProps) {
40  const inputRef = useRef<HTMLInputElement>(null)
41  const [isDragging, setIsDragging] = useState(false)
42  const dragCounter = useRef(0)
43 
44  const handleFiles = useCallback(
45    (files: FileList) => {
46      const newFiles = Array.from(files)
47      if (multiple) {
48        onFilesAdded(newFiles)
49      } else {
50        onFilesAdded(newFiles.slice(0, 1))
51      }
52    },
53    [multiple, onFilesAdded]
54  )
55 
56  useEffect(() => {
57    const handleDrag = (e: DragEvent) => {
58      e.preventDefault()
59      e.stopPropagation()
60    }
61 
62    const handleDragIn = (e: DragEvent) => {
63      handleDrag(e)
64      dragCounter.current++
65      if (e.dataTransfer?.items.length) setIsDragging(true)
66    }
67 
68    const handleDragOut = (e: DragEvent) => {
69      handleDrag(e)
70      dragCounter.current--
71      if (dragCounter.current === 0) setIsDragging(false)
72    }
73 
74    const handleDrop = (e: DragEvent) => {
75      handleDrag(e)
76      setIsDragging(false)
77      dragCounter.current = 0
78      if (e.dataTransfer?.files.length) {
79        handleFiles(e.dataTransfer.files)
80      }
81    }
82 
83    window.addEventListener("dragenter", handleDragIn)
84    window.addEventListener("dragleave", handleDragOut)
85    window.addEventListener("dragover", handleDrag)
86    window.addEventListener("drop", handleDrop)
87 
88    return () => {
89      window.removeEventListener("dragenter", handleDragIn)
90      window.removeEventListener("dragleave", handleDragOut)
91      window.removeEventListener("dragover", handleDrag)
92      window.removeEventListener("drop", handleDrop)
93    }
94  }, [handleFiles, onFilesAdded, multiple])
95 
96  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
97    if (e.target.files?.length) {
98      handleFiles(e.target.files)
99      e.target.value = ""
100    }
101  }
102 
103  return (
104// … truncated