Javascript Save .txt file with FileSaver with custom filename

Question

I would like to specify my .txt file name when saving it with the FileSaver tool available here:

https://github.com/eligrey/FileSaver.js/

As far as I dug down in the web, I found, that in default there is no option for saving it under the specified filename like pointed here:

Is there any way to specify a suggested filename when using data: URI?

Save file Javascript with file name

Can't specific file name with FileSaver.js

there is no reliable way to do this.

However I found something, which would entirely satisfy me. The page is called: FileSaver.js demo

https://eligrey.com/demos/FileSaver.js/

which includes several options of saving files with specified filenames, while also the .txt file.

It means, that apparently the option exist, since they have managed with it.

After I have inspected their website, I tried to replicate the JavaScript code, they used. My piece of code looks like this now:

    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/c3e4a45021f205a790a2699f4af7a5b85fb63e09/demo/demo.css"/>

    <script src="../js/FileSaver.js"></script>

    <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/demo/demo.min.js"/>

    <textarea class="input" id="text" placeholder="Once upon a time..."/></textarea>
    <form id="text-options">
        <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
        <input type="submit" value="Save"/>
     </form>

but unfortunately, it doesn't work as expected.

When I click the "Save" button it just refreshes the page instead of saving the relevant files with the <textarea> content.

Is there any option to fix it at some point?

The code that does it is inside: https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js - basically a series of methods that target a bunch of browsers. — enhzflep, Jun 24 '21 at 14:34
I have already this file attached, and the effect is the same. — Geographos, Jun 24 '21 at 14:43
So, are you really just saying that you don't know how to use a button in a form? The example you chose uses the submit button (a special type button) which triggers form submission. When you submit a form, an event is generated. Their code handles that event and prevents the default behaviour, before doing something with the entered text and filename. You should use a different button. i.e - you also have to attach an event to the new button. They attached a single form submission handler to their document for all the examples, since it saved code. — enhzflep, Jun 24 '21 at 14:50
It sounds too complicated for me. I was going to copy the code from them and try to implement it into my example. I don't understand why it does not work, as everything is roughly the same. — Geographos, Jun 24 '21 at 14:54
It's because clicking the save button submits the form. Submitting the form send the data to the specified page (if there is one) or reloads the current one. They used the submit button as a way of 'cheating' if you like. Rather than attach to all the SAVE buttons, they just handle whenever a form is submitted. I'll throw you a simple example. It's up to you to collect the data and use the fileSaver.min.js code to produce the download (you'll be fine). — enhzflep, Jun 24 '21 at 15:13

score 1 · Answer 1 · answered Jun 24 '21 at 15:16

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    // use either one.
    //var saveBtn = document.querySelector('#saveBtn');
    var saveBtn = document.getElementById('saveBtn');
    
    saveBtn.addEventListener('click', onSaveBtnClick, false);
}

function onSaveBtnClick(evt)
{
    let textData = document.querySelector('#textInput').value;
    let fileName = document.querySelector('#fileNameInput').value;
    
    alert(`${fileName}.txt - ${textData}`);
}

.panel
{
    display: block;
    width: 320px;
    margin: 16px;
    background-color: #f0e3bb;
}

    <div class='panel'>
        <h2>Saving text</h2>
        <textarea id='textInput' placeholder="a plain document"></textarea><br>
        <label><input type='text' id='fileNameInput' placeholder='filename'/>.TXT</label><br>
        <button id='saveBtn'>Save</button>
    </div>

It's good bit I am receiving an alert instead of file saving. I tried: SaveAs(`${fileName}.txt - ${textData}`); but it didn't work — Geographos, Jun 24 '21 at 15:44
I used those macros `${someVarHere}` _inside_ a text block started and ended with back-ticks (the key to the left of 1 and under esc). In your case, use `filename+".txt"` and `textData`. Now wouldn't be a bad time to open the debugger With Ctrl-Shift-I — enhzflep, Jun 24 '21 at 15:55

score 0 · Answer 2 · answered Jun 24 '21 at 16:16

I found some reasonable approach here, which has made my code working.

https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

Instead of standard FileSaver.js function

            function saveURLtoTXTfile() {
            var Urltext = document.getElementById("text").value;

            var blob = new Blob([Urltext], {type: "text/plain;charset=utf-8"});
            saveAs(blob, "survey.txt");

we can define our file name based on the label value like this:

  <form id="text-options">
        <textarea class="input" id="text" rows="1" cols="30"></textarea>
        <label>Filename: <input type="text" class="filename" id="text-filename" 
  placeholder="a plain document"/>.txt</label>
        <button type="button" class="formreturn" 
  onclick="saveURLtoTXTfile();">Save survey details as a text file</button>
    </form>

   function saveURLtoTXTfile() {
            var Urltext = document.getElementById("text").value;
            var textfilename = document.getElementById("text-filename").value;
            var blob = new Blob([Urltext], {type: "text/plain;charset=utf-8"});
            saveAs(blob, textfilename);
        }

and then we get the value from our label in our filename.

Javascript Save .txt file with FileSaver with custom filename

2 Answers2