CODEWITHSUNDEEP
javascriptangularjsnode.jselectron
Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

How to get folder path using electron

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.

enter image description here

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.

Upvotes: 33

Views: 50604

Answers (6)

AntoninL
AntoninL

Reputation: 210

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.
}

Upvotes: 4

Yair Levy
Yair Levy

Reputation: 1594

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

Upvotes: 21

Max
Max

Reputation: 4636

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

Upvotes: 64

Felipe N Moura
Felipe N Moura

Reputation: 1617

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.

Upvotes: 0

rajesh kumar
rajesh kumar

Reputation: 1868

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

Upvotes: 3

inukshuk
inukshuk

Reputation: 1457

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

Upvotes: 0

Related Questions