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?
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?
Share Improve this question asked Feb 6, 2021 at 15:08 Tim ScottTim Scott 771 gold badge2 silver badges9 bronze badges 5-
2
stackoverflow./questions/5192917/… second answer down
<a download="name_of_downloaded_file" href="path/to/the/download/file"> Clicking on this link will force download the file</a>– gugateider Commented Feb 6, 2021 at 15:14 - Did you see that: medium./javascript-in-plain-english/… ? – yovchokalev Commented Feb 6, 2021 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. – terrymorse Commented Feb 6, 2021 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 Commented Feb 6, 2021 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 Commented Feb 6, 2021 at 18:23
3 Answers
Reset to default 6Refer 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>
You can use this https://www.npmjs./package/file-saver then save the file like this: saveAs(blob, 'filename').
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>