CODEWITHSUNDEEP
javascriptnode.jsfileelectron
Dringo
Dringo

Reputation: 265

How to select file OR folder in file dialog

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.

Upvotes: 13

Views: 28912

Answers (3)

Alon Adler
Alon Adler

Reputation: 4024

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

Upvotes: 12

Dringo
Dringo

Reputation: 265

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

Upvotes: 3

Dale
Dale

Reputation: 544

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?

Upvotes: 2

Related Questions