Fixed select file buttons

gcs/electron/main.ts

@@ -180,6 +180,27 @@ ipcMain.on("window:zoom-out", () => {
 ipcMain.on("window:open-file-in-explorer", (_event, filePath) => {
   shell.showItemInFolder(filePath)
 })
+ipcMain.handle("window:select-file-in-explorer", async (_event, filters) => {
+  const { canceled, filePaths } = await dialog.showOpenDialog({
+    properties: ["openFile"],
+    filters: [...filters, { name: "All Files", extensions: ["*"] }],
+  })
+  if (!canceled && filePaths.length > 0) {
+    const filePath = filePaths[0]
+    try {
+      const stats = fs.statSync(filePath)
+      return {
+        path: filePath,
+        name: path.basename(filePath),
+        size: stats.size,
+      }
+    } catch (err) {
+      // File is inaccessible or deleted
+      return null
+    }
+  }
+  return null
+})
 
 function createWindow() {
   win = new BrowserWindow({

gcs/electron/preload.js

@@ -19,6 +19,7 @@ const ALLOWED_INVOKE_CHANNELS = [
   "app:open-link-stats-window",
   "app:close-link-stats-window",
   "app:update-link-stats",
+  "window:select-file-in-explorer",
 ]
 
 const ALLOWED_SEND_CHANNELS = [

gcs/src/components/fla/SelectFlightLog.jsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Divider,
-  FileButton,
   LoadingOverlay,
   Progress,
   ScrollArea,
@@ -34,6 +33,16 @@ export default function SelectFlightLog({ processLoadedFile }) {
     getFgcsLogs()
   }
 
+  const selectFile = async () => {
+    const result = await window.ipcRenderer.invoke(
+      "window:select-file-in-explorer",
+      [{ name: "Flight Logs", extensions: ["log", "ftlog"] }],
+    )
+    if (result) {
+      handleFile(result)
+    }
+  }
+
   const handleFile = useCallback(
     async function (file) {
       if (!file) return
@@ -111,14 +120,9 @@ export default function SelectFlightLog({ processLoadedFile }) {
     <div className="flex flex-col items-center justify-center h-full mx-auto">
       <div className="flex flex-row items-center justify-center gap-8">
         <div className="flex flex-col gap-4">
-          {/* File selection */}
-          <FileButton onChange={handleFile} accept=".log,.ftlog">
-            {(props) => (
-              <Button {...props} loading={loadingFile}>
-                Analyse a log
-              </Button>
-            )}
-          </FileButton>
+          <Button onClick={selectFile} loading={loadingFile}>
+            Analyse a log
+          </Button>
           <Button color="red" variant="filled" onClick={clearFgcsLogs}>
             Clear Logs
           </Button>

gcs/src/missions.jsx

@@ -15,7 +15,6 @@ import {
   ActionIcon,
   Button,
   Divider,
-  FileButton,
   Modal,
   NumberInput,
   Progress,
@@ -117,10 +116,6 @@ export default function Missions() {
   const tabsListRef = useRef(null)
   const [tableSectionHeight, setTableSectionHeight] = useState(300)
 
-  // File import handling
-  const [importFile, setImportFile] = useState(null)
-  const importFileResetRef = useRef(null)
-
   // Modal for mission progress
   const [missionProgressModalTitle, setMissionProgressModalTitle] = useState(
     "Mission progress update",
@@ -152,12 +147,6 @@ export default function Missions() {
     dispatch(emitGetTargetInfo())
   }, [currentPage])
 
-  useEffect(() => {
-    if (importFile) {
-      importMissionFromFile(importFile.path)
-    }
-  }, [importFile])
-
   useEffect(() => {
     activeTabRef.current = activeTab
   }, [activeTab])
@@ -245,17 +234,19 @@ export default function Missions() {
     dispatch(setMissionProgressModal(true))
   }
 
-  function importMissionFromFile(filePath) {
-    dispatch(
-      emitImportMissionFromFile({
-        type: activeTabRef.current,
-        file_path: filePath,
-      }),
+  async function importMissionFromFile() {
+    const result = await window.ipcRenderer.invoke(
+      "window:select-file-in-explorer",
+      [{ name: "Waypoint files", extensions: ["waypoints", "txt"] }],
     )
-
-    // Reset the import file after sending
-    setImportFile(null)
-    importFileResetRef.current?.()
+    if (result) {
+      dispatch(
+        emitImportMissionFromFile({
+          type: activeTabRef.current,
+          file_path: result.path,
+        }),
+      )
+    }
   }
 
   async function saveMissionToFile() {
@@ -414,14 +405,9 @@ export default function Missions() {
                 <Divider className="my-1" />
 
                 <div className="flex flex-col gap-4">
-                  <FileButton
-                    resetRef={importFileResetRef}
-                    onChange={setImportFile}
-                    accept=".waypoints,.txt"
-                    className="grow"
-                  >
-                    {(props) => <Button {...props}>Import from file</Button>}
-                  </FileButton>
+                  <Button className="grow" onClick={importMissionFromFile}>
+                    Import from file
+                  </Button>
                   <Button
                     onClick={() => {
                       saveMissionToFile()