diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index d76845c5..11805c88 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -1,7 +1,7 @@ "use client"; -import { useRef, useState, useEffect, useCallback } from "react"; -import { Film, FolderOpen } from "lucide-react"; +import { useEffect, useRef, useState } from "react"; +import { FolderOpen, Film } from "lucide-react"; import LottiePlayer from "./LottiePlayer"; import uploadAnim from "@/lib/lottie/upload.json"; import { cn, formatBytes, formatDuration } from "@/lib/utils"; @@ -21,14 +21,11 @@ export default function FileUpload({ duration, }: Props) { const inputRef = useRef(null); - const [dragging, setDragging] = useState(false); const [pageDragging, setPageDragging] = useState(false); const [error, setError] = useState(""); const [warning, setWarning] = useState(""); - const dragCounterRef = useRef(0); - // ── Keyboard shortcut Ctrl+O ────────────────────────── useEffect(() => { const handler = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "o") { @@ -36,6 +33,7 @@ export default function FileUpload({ inputRef.current?.click(); } }; + document.addEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler); }, []); @@ -117,7 +115,13 @@ export default function FileUpload({ onFileSelect(file); }, [onFileSelect]); - // ── Drop zone (inner) handler ───────────────────────── + const handleInputChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + + if (file) handleFile(file); + e.target.value = ""; + }; + const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setDragging(false); @@ -125,7 +129,10 @@ export default function FileUpload({ if (file) handleFile(file); }; - // ── File info (shown after upload) ─────────────────── + const openFilePicker = () => { + inputRef.current?.click(); + }; + const FileInfo = () => (
@@ -133,7 +140,9 @@ export default function FileUpload({
+ +

@@ -160,7 +169,7 @@ export default function FileUpload({

); - // ── Drop zone (inner) ───────────────────────────────── const DropZone = () => (
setDragging(false)} onDrop={handleDrop} - onClick={() => inputRef.current?.click()} + onClick={openFilePicker} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { - inputRef.current?.click(); + openFilePicker(); } }} className={cn( @@ -226,9 +223,11 @@ export default function FileUpload({

- {dragging ? "Release to upload" : "Drag & Drop your video here"} + {dragging ? "Release to upload" : "Drag & Drop your video in here"}

+

or click to browse

+

Ctrl+O / Cmd+O

@@ -243,20 +242,13 @@ export default function FileUpload({ Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB

- {fileError && ( -

{fileError}

- )} + {fileError &&

{fileError}

} - { - const f = e.target.files?.[0]; - if (f) handleFile(f); - }} - /> + {currentFile && ( +

+ Selected: {formatBytes(currentFile.size)} +

+ )}
); @@ -293,20 +285,15 @@ export default function FileUpload({
)} - {/* ── Normal upload UI ── */} -
- {error && ( -

- {error} -

- )} - {warning && ( -

- {warning} -

- )} - {currentFile ? : } -
- + {currentFile ? : } + + +
); } \ No newline at end of file