input and output path selectors working

main/index.js

@@ -1,5 +1,5 @@
 // Native
-const { join } = require("path");
+const { join, parse } = require("path");
 const { format } = require("url");
 const { spawn } = require("child_process");
 const fs = require("fs");
@@ -52,7 +52,7 @@ ipcMain.on("sendMessage", (_, message) => {
   console.log(message);
 });
 
-ipcMain.on("open", async () => {
+ipcMain.handle("open", async () => {
   const { canceled, filePaths } = await dialog.showOpenDialog({
     properties: ["openFile", "multiSelections"],
   });
@@ -63,53 +63,68 @@ ipcMain.on("open", async () => {
   } else {
     console.log(filePaths[0]);
     // CREATE input AND upscaled FOLDER 
-    let inputDir = "./input";
-    if (!fs.existsSync(inputDir)) {
-      fs.mkdirSync(inputDir);
-    }
-    let outputDir = "./upscaled";
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir);
-    }
-
-    // COPY IMAGE TO upscaled FOLDER
-    const fileName = filePaths[0].split("/").slice(-1)[0];
-    fs.copyFile(filePaths[0], inputDir + "/" + fileName, (err) => {
-      if (err) throw err;
-    });
-
-    // UPSCALE
-    let upscayl = spawn(
-      execPath,
-      [
-        "-i",
-        inputDir,
-        "-o",
-        outputDir,
-        "-s",
-        "4",
-        "-m",
-        modelsPath,
-        "-n",
-        "realesrgan-x4plus",
-      ],
-      {
-        cwd: null,
-        detached: false,
-      }
-    );
-
-    upscayl.stderr.on("data", (stderr) => {
-      console.log(stderr.toString());
-      stderr = stderr.toString();
-      mainWindow.webContents.send("output", stderr.toString());
-    });
-
-    upscayl.on("close", (code) => {
-      console.log("Done upscaling");
-      mainWindow.webContents.send("done");
-    });
-
     return filePaths[0];
   }
-});
+})
+ipcMain.handle("output", async (event, message) => {
+  const { canceled, filePaths } = await dialog.showOpenDialog({
+    properties: ["openDirectory"],
+  });
+  if (canceled) {
+    console.log("operation cancelled");
+    return "cancelled";
+  }
+  else {
+    console.log(filePaths[0])
+    return filePaths[0];
+  }
+})
+
+ipcMain.on("upscayl", async (event, paths) => {
+  const scale = "4";
+  let inputDir = paths[0].match(/(.*)[\/\\]/)[1]||'';
+  /*if (!fs.existsSync(inputDir)) {
+    fs.mkdirSync(inputDir);
+  }*/
+  let outputDir = paths[1];
+  /*if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir);
+  }*/
+
+  // COPY IMAGE TO upscaled FOLDER
+  const fullfileName = paths[0].split("/").slice(-1)[0];
+  const fileName = parse(fullfileName).name;
+  const fileExt = parse(fullfileName).ext;
+
+  // UPSCALE
+  let upscayl = spawn(
+    execPath,
+    [
+      "-i",
+      inputDir+'/'+fullfileName,
+      "-o",
+      outputDir+'/'+fileName+"_upscaled_"+scale+'x'+fileExt,
+      "-s",
+      scale,
+      "-m",
+      modelsPath,
+      "-n",
+      "realesrgan-x4plus",
+    ],
+    {
+      cwd: null,
+      detached: false,
+    }
+  );
+
+  upscayl.stderr.on("data", (stderr) => {
+    console.log(stderr.toString());
+    stderr = stderr.toString();
+    mainWindow.webContents.send("output", stderr.toString());
+  });
+
+  upscayl.on("close", (code) => {
+    console.log("Done upscaling");
+    mainWindow.webContents.send("done");
+  });
+})

main/preload.js

@@ -7,6 +7,7 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.on(command, (event, args) => {
       func(event, args);
     }),
+  invoke: (command, payload) => ipcRenderer.invoke(command, payload),
   startListen: (func) => {
     ipcRenderer.addListener("stdout",func)
   },

renderer/pages/index.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 
 const Home = () => {
   const [imagePath, SetImagePath] = useState();
+  const [outputPath, SetOutputPath] = useState();
   const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
@@ -24,8 +25,24 @@ const Home = () => {
   }, []);
 
   const imageHandler = async () => {
-    var path = await window.electron.send("open");
-    SetImagePath(path);
+    var path = await window.electron.invoke("open");
+    if (path != "cancelled") {
+      SetImagePath(path);
+      var dirname = path.match(/(.*)[\/\\]/)[1]||''
+      SetOutputPath(dirname)
+    }
+  };
+  const outputHandler = async () => {
+    var path = await window.electron.invoke("output");
+    if (path != "cancelled") {
+      SetOutputPath(path)
+    }
+    else{
+      console.log("Getting output path from input file")
+    }
+  };
+  const upscaylHandler = async () => {
+    window.electron.send("upscayl", [imagePath, outputPath]);
   };
 
   return (
@@ -49,13 +66,13 @@ const Home = () => {
         </div>
         <div className="mt-10">
           <p className="mb-2 font-medium text-neutral-100">Step 3</p>
-          <button className="rounded-lg bg-violet-400 p-3">
+          <button className="rounded-lg bg-violet-400 p-3" onClick={outputHandler}>
             Set Output Folder
           </button>
         </div>
         <div className="mt-10">
           <p className="mb-2 font-medium text-neutral-100">Step 4</p>
-          <button className="rounded-lg bg-green-400 p-3">Upscayl</button>
+          <button className="rounded-lg bg-green-400 p-3" onClick={upscaylHandler}>Upscayl</button>
         </div>
       </div>
       <div className="flex h-screen w-full flex-col items-center justify-center p-5">