import { useRef, useState } from 'react'; import { Upload, X } from 'lucide-react'; export default function FileUploader({ title = "Upload Files", accept = "*", multiple = true, onFilesChange, className = '', ...props }) { const inputRef = useRef(null); const [files, setFiles] = useState([]); const [progress, setProgress] = useState(0); const [dragging, setDragging] = useState(false); const simulateUpload = () => { setProgress(0); let value = 0; const id = setInterval(() => { value += 10; setProgress(value); if (value >= 100) clearInterval(id); }, 120); }; const addFiles = (newFiles) => { const updated = [...files, ...newFiles]; setFiles(updated); onFilesChange?.(updated); simulateUpload(); }; const handleChange = (e) => { addFiles(Array.from(e.target.files)); }; const handleDrop = (e) => { e.preventDefault(); setDragging(false); addFiles(Array.from(e.dataTransfer.files)); }; const removeFile = (name) => { const updated = files.filter(f => f.name !== name); setFiles(updated); onFilesChange?.(updated); }; return (

{title}

{/* Drop Zone */}

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={handleDrop} onClick={() => inputRef.current.click()} className={` cursor-pointer p-10 border-2 border-dashed rounded-xl text-center transition-all duration-300 ${dragging ? 'border-primary bg-primary/10' : 'border-border hover:border-primary/50'} `} >

Drag & drop files here or click to upload

{/* Progress */} {progress > 0 && progress < 100 && (

)} {/* File List */}

{files.map((file, i) => (

{file.name}

{file.type.startsWith('image') && ( {file.name}

)}

))}

); }

Components

File Uploader

Installation

Tailwind Setup