Hello everyone,

I am working on an app using Electron and MaterializeCss to give some neat style to the app.

My app is about reducing an image weight, however, I have the output destination fixed.

I thought about incorporating a button where the user selects a folder and that folder would work as the destination instead of having it fixed from the get-go. Take a look at my code:

My “select folder” button

<input
        type="file"
        id="input-folder"
        class="validate"
        webkitdirectory
        directory
        onchange="javascript:updateOutput()"
      />

My code to remove the file name from the path:

      function updateOutput() {
        var folder_path = folder.files[0].path;
        //Replace single backslash for dual
        folder_path.replace(/\/g, "\\");

        //Look for the last dual backslash
        folder_path = folder_path.slice(0, folder_path.lastIndexOf("\"));

        document.getElementById("output-path").innerText = folder_path;
      }

Here is how it looks when included in the app:

As you can see, it doesn’t have a style according to Materialize CSS, maybe I am doing something wrong (well not maybe, for sure I am). Also if the folder has too many folders/files inside of it (not only first level but all the levels inside), it crashes the app.

Is there a way around it? I simply want a button to let the user select a folder and get the absolute path to that folder.

I appreciate all the help I can get.

Thanks in advance.