'use client'; import { useState, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { UploadCloud, File, X } from 'lucide-react'; interface FileUploadProps { accept?: string; maxSize?: number; onUpload?: (files: File[]) => void; } export default function FileUpload({ accept = '.jpg,.png,.pdf', maxSize = 5, onUpload, }: FileUploadProps) { const [files, setFiles] = useState([]); const [progress, setProgress] = useState(0); const inputRef = useRef(null); const handleFiles = (selected: FileList | null) => { if (!selected) return; const maxBytes = maxSize * 1024 * 1024; const validFiles = Array.from(selected).filter( (file) => file.size <= maxBytes, ); setFiles(validFiles); onUpload?.(validFiles); let p = 0; const interval = setInterval(() => { p += 10; setProgress(p); if (p >= 100) clearInterval(interval); }, 120); }; const openFilePicker = () => { inputRef.current?.click(); }; const removeFile = (index: number) => { const updated = files.filter((_, i) => i !== index); setFiles(updated); }; return (

Upload files Select and upload the files of your choice

Choose a file or drag & drop it here

{accept} • up to {maxSize}MB

Browse File handleFiles(e.target.files)} /> {files.map((file, index) => (

{file.name} {(file.size / 1024).toFixed(1)} KB

))}

); }

File Upload

Installation

Usage