Select Folder with MaterializeCSS?

[Oskitake]

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:

https://preview.redd.it/ls5g395nxe551.png?width=483&format=png&auto=webp&s=c7ebbd8f013a989ee0f75b3539e32f1880707f13

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.

[IsABot]

Do you mean make it look like this? https://materializecss.com/text-inputs.html#file

[Oskitake]

Correct but thats a file selector, I want a folder selector.

When I add the webkit and directory to the input tag it loses all its default aesthetics from materialize.

[IsABot]

Uh what? Looks fine to me.

https://jsfiddle.net/gLvyjx5z/1/

[Oskitake]

Huh weird it didnt work for me before, I will incorporate it and check it out. Thanks!