Create File from Input and Download It

How do I make a txt file from an input, and save it to the device?

Go to files tab
Then,click on add file
Named it (e.g. myFile.txt or saved.txt etc.)
Enter (key on keyboard)
Click on Three lines infront of the your saved.txt (in my case or hust for examples)
Click on Download

Please mark it as solution

No, that’s not what I meant. I meant it dynamically, by using JS. Like the user types on an input, and presses save. It downloads a txt file on the user’s computer, with its contents the value of the input.

I need to test it first, before I set this as the solution

3 Likes

Here’s a great tutorial on what you want.

Essentially, you create a blob (a special way of storing a chunk of data that is useful in a scenario like this) and give it the text you want to save then create an anchor element that you can use to download it. (The below code is adapted from code found at the link above.)

// create an anchor element
const a = document.createElement("a");
// store the data in a blob
const file = new Blob([ "Hello world!" ], { type: "text/plain" });
// set the link of the anchor element to the blob containing the data we've stored
// (most browsers should automatically initiate a download because this link is a blob)
a.setAttribute("href", URL.createObjectURL(file));
// set the name of the file to be downloaded
a.setAttribute("download", "My File.txt");
// 'click' the anchor element causing the download to start
a.click();
// just a clean up step
URL.revokeObjectURL(a.getAttribute("href"));
4 Likes

Hmm, it says 1 Download Failed. (mobile device)

On the laptop I’m currently using, Windows 10, Chrome, I just pasted that into the developer console and it worked fine…

Try doing in Laptop @OmegaOrbitals

2 Likes

Strange. I tried it on laptop, and it worked. I went back to my mobile device and it worked in there…

2 Likes

What browser & OS were you using?

Wait, I have another question. How do I do the saving alert? Like the box that shows up where you choose the parent folder, file name, etc

Some like this’ll be your solution:

txt = "Hello, world!"
file = "hello.txt"
fileAnch = document.createElement("a")
fileAnch.setAttribute("href", "data:text/text;utf8," + txt)
fileAnch.setAttribute("download", file)
fileAnch.click()
4 Likes