NodeJS/electron - Allow use of two seperate dialogues in the same renderer process | Linux/Windows - (CLOSED)

user_17016542 0
Viewed 68

I want to create two seperate electron dialogs in the same renderer process for the following things...

  • file selection
  • Directory selection

I thought I could use one dialog for both File Selection and Directory Selection, but unfortunately that can't be done on both Linux & Windows, unlike how it can on MacOS.

So after some time talking with the devs over at github.com/electron/electron, they have told me that it is possible to use 2 seperate dialogs in the same renderer process of my Linux desktop app, as a workaround to this for Linux & Windows.

The devs pointed me to this page here at electronjs.org, but unfortunately I am having trouble understanding some of it, so I've ended up here at stackoverflow.

The code I've managed to produce so far is below, any help on this would be appreciated.

// First dialog for File Selection | This works fine
$appCtrl.BrowseFile = () => {
    dialog.showOpenDialog({'File browser'}, {

        properties: ['openFile']
    }).then(result => {

        if(result.canceled) {

            $appCtrl.Log("No file selected");
        } else {

            $appCtrl.Log("File selected" + result.filePaths[0]);
            readFile(result.filePaths[0]);
        }
    }).catch(() => {
        $appCtrl.Log("No file selected");
    })

    function readFile(filepath) {
        $appCtrl.filePath = filepath;
        $appCtrl.$apply();
    })
            

    // Second Dialog for Folder Selection | This stops my electron UI from working 
    $appCtrl.BrowseFolder = () => {
    dialog.showOpenDialog({'Folder browser'}, {

        properties: ['openDirectory']
    }).then(result => {

        if(result.canceled) {

            $appCtrl.Log("No directory selected");
        } else {

            $appCtrl.Log("Directory selected" + result.filePaths);
            readFile(result.filePaths);
        }
    }).catch(() => {
        $appCtrl.Log("No directory selected");
    })

    function readFile(filepath) {
        $appCtrl.filePath = filepath;
        $appCtrl.$apply();
    })
electron node.js dialog
1 Answers

Problem solved! all I had to do was the following below.

//function to open the dialog and select a file
  $appCtrl.BrowseFile = () => {
      dialog.showOpenDialog({ 
          properties: ['openFile'], 
          title: 'Select a file', 
          buttonLabel: 'Select',
          filters: [
              { name: 'Text files', extensions: ['.txt'] } // only select .txt files
          ]
      }).then(result => { 
          if(result.canceled) {
              $appCtrl.Log("No file selected"); //if user cancels the dialog
          } else {
              $appCtrl.Log("File selected  " + result.filePaths[0]); // if user selects a file
              readFile(result.filePaths[0]); 
          }
      }).catch(() => { 
          $appCtrl.Log("No file selected"); 
      })

      function readFile(filepath) {
          $appCtrl.filePath = filepath;
          $appCtrl.$apply();
      }
  }

  // function to select directory
  $appCtrl.BrowseFolder = () => { 
      dialog.showOpenDialog({
          properties: ['openDirectory'],
          title: 'Select a Directory',
          buttonLabel: 'Select',
          filters: [
              { name: 'Directories', extensions: ['*'] }
          ]
      }).then(result => {
          if(result.canceled) {
              $appCtrl.Log("No directory selected");
          } else {
              $appCtrl.Log("directory selected " + result.filePaths[0]); // if user selects a directory
              readFile(result.filePaths[0]);
          }
      }).catch(() => {
          $appCtrl.Log("No directory selected");
      })
      
      function readFile(filepath) {
        $appCtrl.filePath = filepath;
        $appCtrl.$apply();
    }

  }
user_170165420
Related