How do I save a file on my desktop using ReactJS?

Question

Right now I am creating a voice search feature. So the plan is I will record the audio using ReactJS, convert the Blob file into a .wav file. Then once the file is created I will save it locally on my desktop. Once the file is on the desktop, I will use the OS module in python to access the file on my desktop to interpret the audio file into text.

So everything is essentially done, the only problem that I am having is I can't figure out how to use ReactJS to save the file on my desktop.

Can someone please help me with this?

https://stackoverflow.com/questions/5192917/force-download-through-js-or-query second answer down ` Clicking on this link will force download the file` — gugateider, Feb 06 '21 at 15:14
Did you see that: https://medium.com/javascript-in-plain-english/how-to-create-download-and-upload-files-in-react-apps-80893da4247a ? — yovchokalev, Feb 06 '21 at 15:25
Saving a file from the browser to anywhere but the downloads folder is a huge security hole, and it's not allowed. I don't think you'll be able to save to the Desktop. Here's a technique that will [save to Downloads](https://stackoverflow.com/a/18197511/3113485). — terrymorse, Feb 06 '21 at 15:39
@terrymorse eventually I will use POST to put it on a server but for now I just want it locally. — Tim Scott, Feb 06 '21 at 15:52
Why not just set up a localhost server? You can save any file to disk with a server, and you'll have written some server code for future use. — terrymorse, Feb 06 '21 at 18:23

score 4 · Answer 1 · answered Feb 06 '21 at 16:17

4

Refer the more detail in web.dev and about MDN blob

Following code will work. (Try loading in chrome dev console or similar)

const saveFile = async (blob) => {
  const a = document.createElement('a');
  a.download = 'my-file.txt';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
  });
  a.click();
};



const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

saveFile(blob);

// With react

<div onClick={() => saveFile(blob)}> save file </div>

answered Feb 06 '21 at 16:17

Siva K V

10,561
2
16
29

Will this save a file to desktop, as OP is trying to do, or to Downloads? – terrymorse Feb 06 '21 at 17:39
2

@terrymorse. When you click the DIV, on the screen appear a window, You can select folder and filename, – quine9997 Nov 11 '21 at 04:04

score 3 · Answer 2 · answered Feb 06 '21 at 15:26

3

You can use this https://www.npmjs.com/package/file-saver then save the file like this: saveAs(blob, 'filename').

answered Feb 06 '21 at 15:26

Viet

12,133
2
15
21

This worked but I can't seem to find a way to save it onto my desktop or a specific folder on the desktop. Can you please help me with that? – Tim Scott Feb 06 '21 at 15:53
@TimScott You can't save a file to anywhere but inside the Downloads folder. – terrymorse Feb 06 '21 at 16:04
https://stackoverflow.com/questions/4453798/specify-default-download-folder-possibly-with-javascript – Viet Feb 06 '21 at 16:15

terrymorse · Answer 3 · 2021-02-06T16:09:27.423

once the file is created I will save it locally on my desktop

It is not possible to save a file from the browser to the Desktop, as this would be a huge security vulnerability.

However, you can save a file into the Downloads folder, if the user authorizes it.

This example saves a "Hello World!" text file to the Downloads folder.

Other data types can be saved, using the "data:" URL.

// save a text file named 'hello-world.txt' to Downloads folder

document.querySelector('button').onclick = function(evt) {
  const data = `data:,Hello%2C%20World!`;
  const filename = 'hello-world.txt';
  const aTag = document.createElement('a');

  aTag.href = data;
  aTag.download = filename;
  aTag.click();
};

<button>Save Hello World!</button>

How do I save a file on my desktop using ReactJS?

3 Answers3