How to get folder path using electron

Question

I am very new to the electron. Can anyone suggest me how to get a local folder's relative path using the electron? JavaScript does not have that capability.

I have a Choose File button(see snapshot), so my question is that when I select a folder and click on the open button then it should return a whole directory path.

Did you use [showOpenDialog](http://electron.atom.io/docs/v0.37.2/api/dialog/#methods)? — phuongle, Mar 23 '16 at 03:08

Max · Accepted Answer · 2020-09-19T01:06:14.290

As @phuongle pointed out in the comments you want to use showOpenDialog(). Something like this:

var remote = require('remote');
var dialog = remote.require('electron').dialog;

var path = dialog.showOpenDialog({
    properties: ['openDirectory']
});

UPDATE: If the above isn't working for your current Electron version, you should try more modern importing:

const {dialog} = require('electron').remote;

In addition, in order to use remote, you need to set enableRemoteModule when creating your window in your main process:

const myWindow = new BrowserWindow({
    webPreferences: {
        enableRemoteModule: true
    }
});

just FYI `const {dialog} = require('electron').remote;` isn't using module imports, its object destructuring. — ste2425, Mar 13 '19 at 20:22

score 14 · Answer 2 · answered Mar 10 '22 at 12:15

Following the official IPC tutorial worked for me

main process:

import {dialog, ipcMain} from 'electron'
function createWindow () {
  mainWindow = new BrowserWindow({/*Your electron window boilerplate*/})
  ipcMain.handle('dialog:openDirectory', async () => {
    const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
      properties: ['openDirectory']
    })
    if (canceled) {
      return
    } else {
      return filePaths[0]
    }
  })
}

preload script:

import {contextBridge, ipcRenderer} from 'electron'

contextBridge.exposeInMainWorld('myAPI', {
  selectFolder: () => ipcRenderer.invoke('dialog:openDirectory')
})

Now you can call the selectFolder method from your application code and get the user input.

window.myAPI.selectFolder().then(result=>{/* Do something with the folder path*/})

rajesh kumar · Answer 3 · 2017-09-26T14:03:13.050

3

In Electron we can select the directory by specifying simple input element with type="file" and webkitdirectory attribute'. <input id="myFile" type="file" webkitdirectory /> and we can get the directory full path with the path property of File object document.getElementById("myFile").files[0].path

edited Sep 26 '17 at 14:03

answered Sep 26 '17 at 13:51

rajesh kumar

1,578
16
14

3

Note: If you're doing this in React, you have to write `webkitdirectory="true"` instead. Just tripped me up. – James Paterson May 10 '19 at 15:56
This doesn't work. Show a working example to prove me wrong. You need to be able to get the full path of the directory including files too. – Alex Cory Dec 23 '19 at 15:56
@AlexCory Note: this solution is specific to Electron environment. – rajesh kumar Dec 24 '19 at 09:06
I tried this solution in electron and instead of giving me the directory name it gave me a window path. Something like `C\...`. Maybe it's because I put all the browser's webkit attributes on the input `webkitdirectory mozdirectory msdirectory odirectory directory multiple`. Also, this solution still doesn't give the absolute path to the directory. – Alex Cory Dec 24 '19 at 20:26
2

when i use webkitdirectory with React it returns all the files path contained in the directory rather than the directory path itself (can take some time when selecting a folder with a lot of files...) – LePioo Apr 16 '20 at 02:53
6

`webkitdirectory` works fine for selecting files, but not for folders. If you use `webkitdirectory` to select a folder, what actually happens is that you select all files in the folder and in subfolders. If there are no files, the selection is empty and you cannot even determine which folder you selected. – toongeorges Aug 11 '20 at 14:18

score 0 · Answer 4 · answered Mar 22 '16 at 11:21

0

You would use Node's path.relative for that.

answered Mar 22 '16 at 11:21

inukshuk

1,419
13
9

sorry, i am not looking for this. – Surjeet Bhadauriya Mar 22 '16 at 11:42

Felipe N Moura · Answer 5 · 2020-05-25T04:40:12.340

0

The solution for me was simply using all in lowercase, with a value true as string in my react component. No extra configuration was required.

Like so:

<input
    id="path-picker"
    type="file"
    webkitdirectory="true"
/>

Edit

It turns out that, as mentioned by @cbartondock, it will recursively look for files in the directory, which is not good!

I ended up using the required electron remote's dialog.

edited May 25 '20 at 04:40

answered May 09 '20 at 05:12

Felipe N Moura

1,367
11
13

1

Doing this leads to a recursive search of the directory chosen, which is a massive waste of time if all you are interested in is the path to the directory itself. – cbartondock May 24 '20 at 13:35

How to get folder path using electron

5 Answers5

Linked