I'm new on electronjs and developing a small application that reads a json file and build a small html form and return the values entered by the user. So I've developed small scripts in javascript that link to html 'button' tags to call dialogs so that a user can enter directories, files and save the final form. Everything works nicely... on electronjs "^3.1.13". But if I'm updating to a recent version of the lib ("^8.2.5"), then all my cool ShowOpenDialog don't work at all. Any clue of what happens? Here is the script to open a folder if it helps:

{
 let myName = document.currentScript.getAttribute('name');
 const ipc       = require('electron').ipcRenderer;

 let  asyncBtn  = document.querySelector('#folder-selector-'+myName);
 let replyField = document.querySelector('#folder-selector-content-'+myName);
 let onButtonClick = function() {
     const { dialog } = require('electron').remote;
     let dialogOptions = {
       title: "Choisir un dossier:",
       properties: ['openDirectory','promptToCreate'],
     };
     dialog.showOpenDialog(
         dialogOptions,
         fileNames => {
           if (fileNames === undefined) {
             console.log("No file selected");
           } else {
             console.log('file:', fileNames[0]);
             replyField.value = fileNames[0];
           }
     })
 };

 asyncBtn.addEventListener("click", onButtonClick);

}

Thanks a lot for any help.

I'm new on electronjs and developing a small application that reads a json file and build a small html form and return the values entered by the user. So I've developed small scripts in javascript that link to html 'button' tags to call dialogs so that a user can enter directories, files and save the final form. Everything works nicely... on electronjs "^3.1.13". But if I'm updating to a recent version of the lib ("^8.2.5"), then all my cool ShowOpenDialog don't work at all. Any clue of what happens? Here is the script to open a folder if it helps:

{
 let myName = document.currentScript.getAttribute('name');
 const ipc       = require('electron').ipcRenderer;

 let  asyncBtn  = document.querySelector('#folder-selector-'+myName);
 let replyField = document.querySelector('#folder-selector-content-'+myName);
 let onButtonClick = function() {
     const { dialog } = require('electron').remote;
     let dialogOptions = {
       title: "Choisir un dossier:",
       properties: ['openDirectory','promptToCreate'],
     };
     dialog.showOpenDialog(
         dialogOptions,
         fileNames => {
           if (fileNames === undefined) {
             console.log("No file selected");
           } else {
             console.log('file:', fileNames[0]);
             replyField.value = fileNames[0];
           }
     })
 };

 asyncBtn.addEventListener("click", onButtonClick);

}

Thanks a lot for any help.

• javascript
• electron

4 Answers 4

Apart from the fact that the call to dialog.showOpenDialog has indeed been updated in recent versions of Electron, and returns a promise instead of making use of a callback function, there is another flaw in your updated code: reading the above-mentioned documentation page shows that getCurrentWindow() is not a method of dialog; it can be obtained from remote instead, so you have to add it explicitely:

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

then simply call it from inside dialog.showOpenDialog:

 dialog.showOpenDialog( getCurrentWindow(), dialogOptions).then(result => {

but this is an error you could have caught yourself by looking at the DevTools's console, which would display:

TypeError: dialog.getCurrentWindow is not a function

Recent version of showOpenDialog receives two arguments: optional BrowserWindow, and options as second argument. It returns promise and not requires callback. https://github./electron/electron/blob/8-x-y/docs/api/dialog.md#dialogshowopendialogbrowserwindow-options

So you need to change you callback logic to promises.

let onButtonClick = function() {
     const { dialog } = require('electron').remote;
     let dialogOptions = {
       title: "Choisir un dossier:",
       properties: ['openDirectory','promptToCreate'],
     };
     dialog.showOpenDialog(
         dialogOptions
     ).then((fileNames)=>{
           if (fileNames === undefined) {
             console.log("No file selected");
           } else {
             console.log('file:', fileNames[0]);
             replyField.value = fileNames[0];
           }
     }).catch(err=>console.log('Handle Error',err))


 };

 asyncBtn.addEventListener("click", onButtonClick);

thanks a lot Vladimir. So I've tried to update my code as explained, updating electron package to version 8.2.5 and modifying the script as you explained but it's not going any better. If I got it well, this code should be correct, but doesn't work on electron 8.2.5. Any error you still see on this?

 {
 let myName = document.currentScript.getAttribute('name');
 const ipc       = require('electron').ipcRenderer;

 let  asyncBtn  = document.querySelector('#folder-selector-'+myName);
 let replyField = document.querySelector('#folder-selector-content-'+myName);
 let onButtonClick = function() {
     const { dialog } = require('electron').remote;

     let dialogOptions = {
       title: "Choisir un dossier:",
       properties: ['openDirectory','promptToCreate']
     };
     dialog.showOpenDialog( dialog.getCurrentWindow(), dialogOptions).then(result => {
     if(!result.canceled) {
          replyField.value = result.filePaths[0];
      }
     }).catch(err => {
       console.log(err)
     })
 };
 asyncBtn.addEventListener("click", onButtonClick);
 }

Ok, finally got it. Apart from the most appreciated help I had, I missed "webPreferences": { nodeIntegration: true } in the main.js to make it work. The discovering of the Developer Tools were of great help as well :)

Now everything is fine again. Thanks a lot!