From 9d63e62bc0ff2296d4068d3bd14cf8a76eb44fb1 Mon Sep 17 00:00:00 2001
From: satyamtiwari1499 <satyamtiwari1499@gmail.com>
Date: Fri, 22 May 2026 19:45:51 +0530
Subject: [PATCH] fix: use a single hidden file input

---
 src/components/FileUpload.tsx | 186 ++++++++++++++--------------------
 1 file changed, 77 insertions(+), 109 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 6e10fd77..58aa7ad4 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useRef, useState, useEffect} 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,11 +21,10 @@ export default function FileUpload({
   duration,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
-
   const [dragging, setDragging] = useState(false);
   const [error, setError] = useState("");
   const [warning, setWarning] = useState("");
-  
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "o") {
@@ -33,6 +32,7 @@ export default function FileUpload({
         inputRef.current?.click();
       }
     };
+
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, []);
@@ -41,7 +41,6 @@ export default function FileUpload({
     setError("");
     setWarning("");
 
-    // Validate type
     if (!file.type.startsWith("video/")) {
       setError("Only video files are allowed.");
       return;
@@ -52,19 +51,18 @@ export default function FileUpload({
       return;
     }
 
-    // Hard limit
     if (file.size > MAX_FILE_SIZE) {
       setError(
-        `File too large (${formatBytes(
-          file.size
-        )}). Maximum allowed size is 2GB.`
+        `File too large (${formatBytes(file.size)}). Maximum allowed size is 2GB.`
       );
       return;
     }
 
-    // Soft warning
     if (file.size > WARNING_FILE_SIZE) {
-      const estimatedMinutes = Math.max(1, Math.round(file.size / (100 * 1024 * 1024)));
+      const estimatedMinutes = Math.max(
+        1,
+        Math.round(file.size / (100 * 1024 * 1024))
+      );
       setWarning(
         `Large file detected (${formatBytes(
           file.size
@@ -75,6 +73,13 @@ export default function FileUpload({
     onFileSelect(file);
   };
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+
+    if (file) handleFile(file);
+    e.target.value = "";
+  };
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setDragging(false);
@@ -83,90 +88,64 @@ export default function FileUpload({
     if (file) handleFile(file);
   };
 
- const FileInfo = () => (
-  <div className="px-4 py-3 bg-film-50 border border-film-200 rounded-lg">
-    <div className="flex flex-col lg:flex-row lg:items-center gap-3">
-
-      <div className="flex items-start gap-3 flex-1 min-w-0">
-
-        <div className="hidden lg:flex items-center justify-center w-9 h-9 rounded-lg bg-[var(--surface)] border border-[var(--border)] shrink-0">
-          <Film size={16} className="text-film-600" />
-        </div>
+  const openFilePicker = () => {
+    inputRef.current?.click();
+  };
 
-        <Film size={18} className="lg:hidden text-film-600 shrink-0 mt-0.5" />
-
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-center gap-2 mb-0.5">
-            <p className="text-sm font-semibold text-film-700 truncate max-w-[320px] xl:max-w-[420px]">
-              {currentFile?.name}
-            </p>
-            {currentFile && (
-              <span className="px-2 py-0.5 bg-gray-700 text-white font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
-                {currentFile.name.includes(".")
-                  ? currentFile.name.split(".").pop()
-                  : "VIDEO"}
-              </span>
-            )}
+  const FileInfo = () => (
+    <div className="px-4 py-3 bg-film-50 border border-film-200 rounded-lg">
+      <div className="flex flex-col lg:flex-row lg:items-center gap-3">
+        <div className="flex items-start gap-3 flex-1 min-w-0">
+          <div className="hidden lg:flex items-center justify-center w-9 h-9 rounded-lg bg-[var(--surface)] border border-[var(--border)] shrink-0">
+            <Film size={16} className="text-film-600" />
           </div>
-          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
-            <p>{formatBytes(currentFile?.size ?? 0)}</p>
-
-            <p>
-              {duration > 0
-                ? `Duration: ${formatDuration(duration)}`
-                : "Loading duration..."}
-            </p>
+
+          <Film size={18} className="lg:hidden text-film-600 shrink-0 mt-0.5" />
+
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-wrap items-center gap-2 mb-0.5">
+              <p className="text-sm font-semibold text-film-700 truncate max-w-[320px] xl:max-w-[420px]">
+                {currentFile?.name}
+              </p>
+              {currentFile && (
+                <span className="px-2 py-0.5 bg-gray-700 text-white font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
+                  {currentFile.name.includes(".")
+                    ? currentFile.name.split(".").pop()
+                    : "VIDEO"}
+                </span>
+              )}
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
+              <p>{formatBytes(currentFile?.size ?? 0)}</p>
+              <p>
+                {duration > 0
+                  ? `Duration: ${formatDuration(duration)}`
+                  : "Loading duration..."}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <button
-        type="button"
-        onClick={() => inputRef.current?.click()}
-        className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
-      >
-        Change
-        <span className="text-[var(--muted)] ml-1">(Ctrl+O)</span>
-      </button>
+        <button
+          type="button"
+          onClick={openFilePicker}
+          className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
+        >
+          Change
+          <span className="text-[var(--muted)] ml-1">(Ctrl+O)</span>
+        </button>
+      </div>
 
+      <p className="text-xs text-gray-500 mt-3 break-words">
+        Supports: MP4, MOV, AVI, MKV, WebM, and most video formats
+      </p>
 
       {fileError && (
-        <p className="text-xs text-red-500 mt-2 font-medium">
-          {fileError}
-        </p>
+        <p className="text-xs text-red-500 mt-2 font-medium">{fileError}</p>
       )}
-      <input
-        ref={inputRef}
-        type="file"
-        accept="video/*"
-        className="hidden"
-        onChange={(e) => {
-          const f = e.target.files?.[0];
-          if (f) handleFile(f);
-        }}
-      />
     </div>
+  );
 
-    <p className="text-xs text-gray-500 mt-3 break-words">
-      Supports: MP4, MOV, AVI, MKV, WebM, and most video formats
-    </p>
-
-    {fileError && (
-      <p className="text-xs text-red-500 mt-2 font-medium">{fileError}</p>
-    )}
-
-    <input
-      ref={inputRef}
-      type="file"
-      accept="video/*"
-      className="hidden"
-      onChange={(e) => {
-        const f = e.target.files?.[0];
-        if (f) handleFile(f);
-      }}
-    />
-  </div>
-);
   const DropZone = () => (
     <div
       id="upload-zone"
@@ -178,10 +157,10 @@ export default function FileUpload({
       }}
       onDragLeave={() => setDragging(false)}
       onDrop={handleDrop}
-      onClick={() => inputRef.current?.click()}
+      onClick={openFilePicker}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
-          inputRef.current?.click();
+          openFilePicker();
         }
       }}
       className={cn(
@@ -192,7 +171,6 @@ export default function FileUpload({
           : "border-[var(--border)] bg-[var(--bg)] hover:border-film-400 hover:bg-film-50/40"
       )}
     >
-      {/* Premium Light Beam Shimmer Effect */}
       {dragging && (
         <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-film-500/20 to-transparent pointer-events-none" />
       )}
@@ -202,14 +180,10 @@ export default function FileUpload({
 
       <div className="text-center">
         <p className="font-heading font-semibold text-[var(--text)] text-base">
-          {dragging
-            ? "Release to upload"
-            : "Drag & Drop your video in here"}
+          {dragging ? "Release to upload" : "Drag & Drop your video in here"}
         </p>
 
-        <p className="text-sm text-[var(--muted)] mt-1">
-          or click to browse
-        </p>
+        <p className="text-sm text-[var(--muted)] mt-1">or click to browse</p>
 
         <p className="text-xs text-[var(--muted)] mt-2 font-heading">
           Ctrl+O / Cmd+O
@@ -225,28 +199,14 @@ export default function FileUpload({
         Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
       </p>
 
-      {fileError && (
-        <p className="text-sm text-red-500 text-center">{fileError}</p>
-      )}
+      {fileError && <p className="text-sm text-red-500 text-center">{fileError}</p>}
 
       {currentFile && (
         <p className="text-xs text-[var(--muted)] mt-2">
           Selected: {formatBytes(currentFile.size)}
         </p>
       )}
-
-        <input
-          ref={inputRef}
-          type="file"
-          accept="video/*"
-          className="hidden"
-          onChange={(e) => {
-            const f = e.target.files?.[0];
-
-            if (f) handleFile(f);
-          }}
-        />
-      </div>
+    </div>
   );
 
   return (
@@ -256,6 +216,14 @@ export default function FileUpload({
       {warning && <p className="text-sm text-yellow-500">{warning}</p>}
 
       {currentFile ? <FileInfo /> : <DropZone />}
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="video/*"
+        className="hidden"
+        onChange={handleInputChange}
+      />
     </div>
   );
 }