Electron showSaveDialog tutorial

In this tutorial we’ll look at how to use Electron showSaveDialog. The save dialog will return a string containing a path which the user selected.

To only display a save dialog this is what is needed as a minimum:

const { dialog } = require('electron')

const savePath = dialog.showSaveDialog(null);
console.log(savePath)

But as with the other dialogs we can do more with it:

const { dialog, app } = require('electron')

const options = {
  defaultPath: app.getPath('documents') + '/electron-tutorial-app.pdf',
}
dialog.showSaveDialog(null, options, (path) => {
  console.log(path);
});

The code above proposes a path and a filename to the user when opening the save dialog with defaultPath. It uses app.getPath to get the path to our users document folder and then appends a filename.pdf

I’ve also changed so that the callback method is used which gives us the path. I’d recommend to look at the showSaveDialog documentation to see what more options you can use.

This code is added to Electron tutorial app and you can take a look at the dialog.js file to see this code.

In the next tutorial we’ll continue from here and save the pdf. But that post is coming soon.

I hope you find this post valuable. If you click the ad below I get paid by someone else and can continue to publish posts for free. I would appreciate it very much.