commit 018

src/components/FileUpload.jsx

@@ -1,34 +1,51 @@
-import { useRef } from "react";
+import React, { useState, useRef } from "react";
 
 export default function FileUpload({ onCodeParsed }) {
-  const inputRef = useRef();
+  const [preview, setPreview] = useState(null);
+  const inputRef = useRef(null); // ✅ create the ref
 
-  const handleFile = (e) => {
+  const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (!file) return;
 
+    setPreview({ name: file.name, size: file.size });
+
     const reader = new FileReader();
+
     reader.onload = () => {
       const code = reader.result;
       if (typeof onCodeParsed === "function") {
-        onCodeParsed(code, file.name); // ✅ pass both code and filename
+        onCodeParsed(code, file.name);
       }
     };
+
     reader.readAsText(file);
   };
 
+  const triggerUpload = () => {
+    if (inputRef.current) {
+      inputRef.current.click(); // ✅ safe
+    }
+  };
+
   return (
-    <div className="file-upload">
+    <div style={wrapperStyle}>
+      <button onClick={triggerUpload} style={labelStyle}>
+        📁 Upload Code
+      </button>
       <input
-        type="file"
-        accept=".js,.ts,.py,.java,.json,.txt"
         ref={inputRef}
-        className="hidden"
-        onChange={handleFile}
+        type="file"
+        accept=".js,.ts,.py,.java,.cpp,.cs,.txt"
+        onChange={handleFileChange}
+        hidden
       />
-      <button onClick={() => inputRef.current.click()}>
-        Upload Code File
-      </button>
+
+      {preview && (
+        <div style={previewStyle}>
+          <strong>{preview.name}</strong> — {(preview.size / 1024).toFixed(1)} KB
+        </div>
+      )}
     </div>
   );
 }