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.

Alinaaline

anyone have answer?? – Alinaaline

Did you use showOpenDialog? – Postcard

Answer 1

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
    }
});

Iaea

just FYI const {dialog} = require('electron').remote; isn't using module imports, its object destructuring. – Lardaceous

Answer 2

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*/})

Pameliapamelina

Answer 3

Update for recent versions of electron (works with 25.3.0) and ES6 import

• First thing : import electron remote npm install --save @electron/remote

• Then in your main process (where you create your window) :

import * as remoteMain from '@electron/remote/main';
// ...
remoteMain.initialize();

function createWindow() {
  win = new BrowserWindow({
    webPreferences: {
      plugins: true,
      contextIsolation: false,
      webSecurity: false
      // ...
    }
  });

  remoteMain.enable(win.webContents);

  //...
}

• Finally the function I use to log the file path in my component :

import * as remote from '@electron/remote';
// ...
async function getDir() {
  const showDialog = await remote.dialog.showOpenDialog({
    properties: ['openDirectory']
  });
  // Do things with showDialog
  console.log(showDialog.filePaths) // logs the directory path.
}

Gastelum

Answer 4

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

Stomach

Note: If you're doing this in React, you have to write webkitdirectory="true" instead. Just tripped me up. – Whiten

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. – Luckin

@AlexCory Note: this solution is specific to Electron environment. – Stomach

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. – Luckin

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...) – Husch

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. – Crampon

Answer 5

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

Rowan

sorry, i am not looking for this. – Alinaaline

Answer 6

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.

Haun

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. – Make