One of the most common tasks when building desktop applications is interacting with the user's file system. This often involves allowing users to open existing files or save new ones. While you could build custom UI elements for this, Electron provides convenient access to the operating system's native file dialogs. This means your app will present a familiar and intuitive file browser that users on Windows, macOS, and Linux are already accustomed to. This not only enhances the user experience but also saves you significant development time.
Electron's dialog module is your gateway to these native dialogs. It's part of the electron module, so you can import it directly into your renderer process or main process code. For security and performance reasons, the dialog module is primarily intended for use in the main process, but we'll explore how to trigger it from the renderer process.
const { dialog } = require('electron');The most common dialogs you'll use are for opening and saving files. The dialog.showOpenDialog() method allows users to select one or more files, while dialog.showSaveDialog() prompts the user to specify a location and filename for saving.
Let's start with opening a file. The showOpenDialog() method returns a Promise that resolves with an object containing filePaths (an array of strings representing the selected file paths) and canceled (a boolean indicating if the dialog was canceled). Here's an example of how you might use it:
async function openFile() {
const { canceled, filePaths } = await dialog.showOpenDialog({
title: 'Open a File',
buttonLabel: 'Select',
properties: ['openFile', 'multiSelections']
});
if (canceled) {
console.log('User canceled file selection.');
return;
}
console.log('Selected files:', filePaths);
// Here you would typically read the content of the selected files
}In the showOpenDialog() configuration, we can specify several options:
title: The title of the dialog window.buttonLabel: The text displayed on the confirmation button (e.g., 'Open', 'Select').properties: An array that dictates the behavior of the dialog. Some common values include:'openFile': Allows selection of files.'openDirectory': Allows selection of directories.'multiSelections': Allows selection of multiple files or directories.'createDirectory': Allows the user to create a new directory within the dialog.'showHiddenFiles': Shows hidden files in the dialog.