feat(file): add file input

SalamLang · Jan 6, 2025 · 984f954 · 984f954
1 parent f37e371
commit 984f954
Showing 1 changed file with 35 additions and 3 deletions.
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -1,15 +1,47 @@
 import Dropdown from "../shared/dropdown/Dropdown.jsx";
 import DropdownItem from "../shared/dropdown/DropdownItem.jsx";
+import {useState} from "react";
 
 const Header = () => {
+    const [fileContent, setFileContent] = useState("");
+
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            if (file.type === "text/plain") {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    console.log("File content:", e.target.result);
+                    setFileContent(e.target.result);
+                };
+                reader.readAsText(file);
+            } else {
+
+            }
+        }
+    };
+
+    const openFilePicker = () => {
+        document.getElementById("fileInput").click();
+    };
+
 
     return (<>
-        <header className={"header bg-[#ffdecc] h-[35px] w-[100vw] flex justify-start items-center pr-[75px] gap-[20px]"}>
+        <header
+            className={"header bg-[#ffdecc] h-[35px] w-[100vw] flex justify-start items-center pr-[75px] gap-[20px]"}>
             <Dropdown title={"اسناد"}>
-                <DropdownItem title={"باز کردن فایل"} />
-                <DropdownItem title={"باز کردن فایل"} />
+                <DropdownItem title={"باز کردن فایل"} callback={() => {
+                    openFilePicker()
+                }}/>
             </Dropdown>
         </header>
+        <input
+            type="file"
+            id="fileInput"
+            style={{display: "none"}}
+            className={"hidden"}
+            onChange={handleFileChange}
+        />
     </>)
 }