<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Open File or Directory</title> </head> <body> <div class="section-wrapper"> <h1>Use system dialogs</h1> <h3> The <code>dialog</code> module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages. </h3> <p> This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process. </p> <p> Open the <a href="https://electronjs.org/docs/api/dialog/"> full API documentation (opens in new window) </a> in your browser. </p> </div> <div> <div> <h2>Open a File or Directory</h2> <div> <div> <button id="select-directory">View Demo</button> <span id="selected-file"></span> </div> <p> In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process. </p> <h5>Renderer Process</h5> <pre> <code> const {ipcRenderer} = require('electron') const selectDirBtn = document.getElementById('select-directory') selectDirBtn.addEventListener('click', (event) => { ipcRenderer.send('open-file-dialog') }) ipcRenderer.on('selected-directory', (event, path) => { document.getElementById('selected-file').innerHTML = `You selected: ${path}` }) </code> </pre> <h5>Main Process</h5> <pre> <code> const {ipcMain, dialog} = require('electron') ipcMain.on('open-file-dialog', (event) => { dialog.showOpenDialog({ properties: ['openFile', 'openDirectory'] }, (files) => { if (files) { event.sender.send('selected-directory', files) } }) }) </code> </pre> <div> <h2>ProTip</h2> <strong>The sheet-style dialog on macOS.</strong> <p> On macOS you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the <code>window</code> as the first argument in the dialog method. </p> <pre><code class="language-js">const ipc = require('electron').ipcMain const dialog = require('electron').dialog const BrowserWindow = require('electron').BrowserWindow ipc.on('open-file-dialog-sheet', function (event) { const window = BrowserWindow.fromWebContents(event.sender) const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]}) })</code></pre> </div> </div> </div> </div> <script> // You can also require other files to run in this process require("./renderer.js"); </script> </body> </html>