"use client"; import { AnimatePresence, motion } from "framer-motion"; import { File, Trash2, Upload } from "lucide-react"; import type React from "react"; import { type DragEvent, useRef, useState } from "react"; interface FileWithPreview extends File { preview: string; } export function FileDropzone() { const [files, setFiles] = useState([]); const [isDragActive, setIsDragActive] = useState(false); const fileInputRef = useRef(null); const handleDragEnter = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragActive(true); }; const handleDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragActive(false); }; const handleDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); }; const handleDrop = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragActive(false); const droppedFiles = Array.from(e.dataTransfer.files); handleFiles(droppedFiles); }; const handleFiles = (fileList: File[]) => { const newFiles = fileList.map((file) => Object.assign(file, { preview: URL.createObjectURL(file), }), ); setFiles((prevFiles) => [...prevFiles, ...newFiles]); }; const handleButtonClick = () => { fileInputRef.current?.click(); }; const handleFileInputChange = (e: React.ChangeEvent) => { if (e.target.files) { handleFiles(Array.from(e.target.files)); } }; const handleDeleteFile = (fileToDelete: FileWithPreview) => { setFiles((prevFiles) => prevFiles.filter((file) => file !== fileToDelete)); URL.revokeObjectURL(fileToDelete.preview); }; return (

{isDragActive ? (

Drop files here...

) : (

Drag and drop files here, or click to select

)} {files.length > 0 && ( {files.map((file) => ( {file.type.startsWith("image/") ? (

) : ( )} {file.name} { e.stopPropagation(); handleDeleteFile(file); }} /> ))} )}

); } export default FileDropzone;

Droppable File

Modern Simple Input