Saving files locally with electron

Question

I have some template files that contain a few variable strings each, I'd like to build a very simple input form with Electron (https://www.electronjs.org/) and I want to save the composed output file on the user's computer.

Is there any module I can use to let Electron save files locally?

@Zen Is there any way to create multiple directories (i.e. `path/dir`, `path/dir2`, ...) with one command or is the only way to loop `mkdir`? — oldboy, Oct 05 '19 at 06:30

score 68 · Accepted Answer · edited Feb 15 '21 at 08:03

68

If you are targeting multiple platforms, I answered a similar question here. Basically app.getPath(name), app.setPath(name, path), and app.getAppPath() are very useful in saving files to the the right place regardless of the OS.

You may also want to check out these Nodejs packages which help simplify saving files directly to the host machine...

If you intend for users to save files you might also have a look at the Dialog api where you can specifically invoke a save dialog for that purpose.

edited Feb 15 '21 at 08:03

vicke4

2,973
1
20
20

answered Jun 28 '16 at 18:27

Josh

3,225
25
22

1

I used app.getAppPath to create a file. You are not allowed to create files in the folder that hosts your electron app. – Johann Feb 12 '17 at 14:55

ClementNerma · Answer 2 · 2020-05-25T21:55:52.407

34

A sample code is :

const fs = require('fs');
try { fs.writeFileSync('myfile.txt', 'the text to write in the file', 'utf-8'); }
catch(e) { alert('Failed to save the file !'); }

You can of course store the file's name as well as the content's name in variables.

This will save the content in myfile.txt, which is located inside the current working directory (which you can get through process.cwd()). If you want to write, let's say in the user's home directory, you can use the app.getPath function.

edited May 25 '20 at 21:55

answered Jul 02 '16 at 21:47

ClementNerma

1,079
1
11
16

7

Where should this save to? Didn't seem to work for me. – Philip Kirkbride Jul 18 '17 at 18:11
how to define specific path for saving the file – Azim Shaikh Sep 01 '17 at 12:43
What do you mean? – ClementNerma Sep 01 '17 at 18:26
Where does it save it to on windows? – shinzou Dec 26 '17 at 12:41
1

If you specify a relative path, like I did, it will save on the path you gave under the current directory (let's say for instance `C:\MyIncredibleFolder\myfile.txt`). If you give an absolute path, it will save the file under the exact path you give. Also, if you want to know in what the relative path you give will result, you can print the result of `require('path').join(process.cwd(), "my/relative/path.txt")` – ClementNerma Dec 27 '17 at 21:22
2

This raises more questions then it answers. – Sachin Anand Dec 21 '20 at 14:41
What do you mean? – ClementNerma Dec 22 '20 at 16:00

score 11 · Answer 3 · edited Feb 09 '21 at 05:18

11

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

export default {
    methods: {
        save: function () {
            var options = {
                title: "Save file",
                defaultPath : "my_filename",
                buttonLabel : "Save",

                filters :[
                    {name: 'txt', extensions: ['txt']},
                    {name: 'All Files', extensions: ['*']}
                ]
            };

            dialog.showSaveDialog(null, options).then(({ filePath }) => {
                fs.writeFileSync(filePath, "hello world", 'utf-8');
            });
        },
    }
}

edited Feb 09 '21 at 05:18

SeaWorld

352
3
11

answered Jul 29 '19 at 21:10

JeffCharter

1,431
17
27

Excellent; thank you for this. I didn't realize Electron had these functions built-in. The new [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) was lacking for my use case because I couldn't get the full selected path. – encryptedcurse Jul 09 '21 at 08:17

Saving files locally with electron

3 Answers3

Linked