How to select file OR folder in file dialog

Question

How would someone open up a file dialog in Node.js / electron to be able to select either a folder or a file.

When I use

<input type="file"/>

it will open up the file dialog but won't allow me to select a folder. But when I try

<input type="file" webkitdirectory/>

it will open up the dialog, but won't allow for folder selection.

What I want to do is just have one input button, or doesn't really have to be a button, but a way to launch the native system file explorer for both possibilities.

https://github.com/electron/electron/blob/master/docs/api/dialog.md#dialogshowcertificatetrustdialogbrowserwindow-options-callback-macos-windows says that it's not possible for windows and linux (doesn't it mean it's possible for osX ?) But it sounds like an better way to open up this dialog for electron anyway. — Kaiido, Jun 27 '17 at 06:09

score 12 · Accepted Answer · answered Jun 27 '17 at 17:12

You can initiate a file system open dialog from a Renderer Process (a browser window).

On your Main Process, you are listening to the Renderer Process, in case of open-file-dialog command is sent from the Renderer Process, the Main Process will display an Open File Dialog per the Operating System (As demonstrated below, an ['openFile'] property is being sent, and you can also use ['openDirectory'] for Open Directory dialog, or both of them) and will send back the selected file\path to the Renderer Process.

Renderer process

//Adding an event listener to an html button which will send open-file-dialog to the main process
const ipc = require('electron').ipcRenderer
const selectDirBtn = document.getElementById('select-file')

selectDirBtn.addEventListener('click', function (event) {
     ipc.send('open-file-dialog')
});

//Getting back the information after selecting the file
ipc.on('selected-file', function (event, path) {

//do what you want with the path/file selected, for example:
document.getElementById('selected-file').innerHTML = `You selected: ${path}`

});

Main Process

//listen to an open-file-dialog command and sending back selected information
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-file-dialog', function (event) {
  dialog.showOpenDialog({
    properties: ['openFile']
  }, function (files) {
    if (files) event.sender.send('selected-file', files)
  })
})

Fantastic! Thanks for the great sample. I was looking for this for a day or two and couldn't find it / didn't know what to search for to find system dialogs in Electron. Great help! — raddevus, Oct 24 '19 at 18:11

score 3 · Answer 2 · answered Jun 27 '17 at 14:51

For anyone that is running into similar trouble, this only works for electron. But electron has a funky file dialog API built in that is a bit more flexible than the native HTML one.

The code looks something like this

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

    dialog.showOpenDialog({
      properties: ["openDirectory","openFile"]
    },function (fileNames) {
      // do cool stuff here
    });

score 2 · Answer 3 · answered Jun 27 '17 at 06:35

2

Try adding directory as well as webkitdirectory. Otherwise see these:

Directory Chooser in HTML page

How to get folder directory from HTML input type "file" or any other way?

answered Jun 27 '17 at 06:35

Dale

534
4
13

How to select file OR folder in file dialog

3 Answers3