added browse option

main/index.js

@@ -5,7 +5,7 @@ const { exec } = require("child_process");
 const fs = require("fs");
 
 // Packages
-const { BrowserWindow, app, ipcMain } = require("electron");
+const { BrowserWindow, app, ipcMain, dialog } = require("electron");
 const isDev = require("electron-is-dev");
 const prepareNext = require("electron-next");
 
@@ -42,3 +42,15 @@ app.on("window-all-closed", app.quit);
 ipcMain.on("sendMessage", (_, message) => {
   console.log(message);
 });
+
+ipcMain.handle("open", async () => {
+  const {canceled, filePaths} = await dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] })
+  if (canceled) {
+    console.log('operation cancelled')
+    return("cancelled")
+  }
+  else {
+    console.log(filePaths[0])
+    return(filePaths[0])
+  }
+})

renderer/pages/index.jsx

@@ -5,13 +5,19 @@ const Home = () => {
     // send(command, payload)
     window.electron.send("sendMessage", { message: "Hello!" });
   }, []);
+  const [imagePath, SetImagePath] = useState()
+  const imageHandler = async () => {
+    var path = await window.electron.invoke("open")
+    SetImagePath(path)
+    console.log(imagePath)
+  }
   return (
     <div className="flex h-screen w-screen flex-row bg-neutral-900">
       <div className="flex h-screen w-96 flex-col bg-neutral-800 p-5">
         <h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1>
         <div className="mt-10">
           <p className="mb-2 font-medium text-neutral-100">Step 1</p>
-          <button className="rounded-lg bg-sky-400 p-3">Select Image</button>
+          <button className="rounded-lg bg-sky-400 p-3" onClick={imageHandler} >Select Image</button>
         </div>
         <div className="mt-10">
           <p className="mb-2 font-medium text-neutral-100">Step 2</p>