"use client"; import React, { useState, DragEvent, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Button } from "@/Components/ui/button"; import { Card } from "@/Components/ui/card"; // A simple SVG loader component for the uploading state const Loader = () => ( ); // // Folder Icon (Refactored with Variants) // const FolderIcon = ({ isOpen, fileName, }: { isOpen: boolean; fileName?: string; }) => { const lidVariants = { closed: { y: 0, rotateZ: 0 }, open: { y: 50, rotateZ: -5 }, }; const bodyVariants = { closed: { y: 0, scale: 1 }, open: { y: -25, scale: 1.02 }, }; return (

); }; // ... FileIcon remains the same ... const FileIcon = ({ name }: { name: string }) => (

{name}

); // // Main Card (Refactored) // const FileUploadCard = ({ onFileSelect, }: { onFileSelect?: (file: File) => void | Promise; }) => { // We store the full File object, not just the name const [file, setFile] = useState(null); const [uploadState, setUploadState] = useState<"idle" | "uploading" | "sent">( "idle" ); // States to manage hover and drag events independently const [isHovering, setIsHovering] = useState(false); const [isDragging, setIsDragging] = useState(false); // This ref helps fix the drag-leave flicker issue const dragCounter = useRef(0); const fileInputRef = useRef(null); // This is our derived state. The folder is "open" if hovered, being dragged over, OR if a file is selected. const isFolderOpen = isHovering || isDragging || !!file; const setFileAndResetInput = (newFile: File | null) => { setFile(newFile); if (!newFile && fileInputRef.current) { fileInputRef.current.value = ""; } // notify parent when a file is selected if (newFile && onFileSelect) { // don't await here to keep UI snappy; parent can return a promise if needed void onFileSelect(newFile); } }; const handleDragEnter = (e: DragEvent) => { e.preventDefault(); dragCounter.current++; if (dragCounter.current === 1) { setIsDragging(true); } }; const handleDragLeave = (e: DragEvent) => { e.preventDefault(); dragCounter.current--; if (dragCounter.current === 0) { setIsDragging(false); } }; const handleDrop = (e: DragEvent) => { e.preventDefault(); setIsDragging(false); dragCounter.current = 0; // Reset counter if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { setFileAndResetInput(e.dataTransfer.files[0]); e.dataTransfer.clearData(); } }; const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { setFileAndResetInput(e.target.files[0]); } }; const handleUpload = () => { if (file) { setUploadState("uploading"); setTimeout(() => { setUploadState("sent"); setTimeout(() => { setFileAndResetInput(null); setUploadState("idle"); }, 1800); // Show "sent" for 1.8s }, 2000); // Simulate upload } }; return (

setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} onClick={() => fileInputRef.current?.click()} className="relative w-full flex flex-col items-center justify-center p-8 text-center overflow-hidden cursor-pointer" animate={{ borderColor: isDragging ? "rgb(34 197 94)" : "rgb(31 41 55)", // Tailwind's green-500 and gray-800 }}>

{!file && uploadState === "idle" && (

Upload a File

Drop your document here.

)} {file && (

{ e.stopPropagation(); setFileAndResetInput(null); }} disabled={uploadState === "uploading"}>

)}

); }; export default FileUploadCard;

File Upload Card

Preview

Dependencies

Source