javascript - Firefox downloading multiple files at once not possible?

Question

Downloading multiple blobs in chrome, edge and IE doesn't seem to be a problem, but on Firefox I'm having the problem that most of the time only the last file or max. 2 of them will be "downloaded". I searched for a "download blob" code and adapted it to download more at once and the issue is reproducible on my machine on latest Firefox version on Windows 10, see JS code below in Firefox.

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);
saveData(data, fileName + 1);
saveData(data, fileName + 2);
saveData(data, fileName + 3);
saveData(data, fileName + 4);
saveData(data, fileName + 5);
saveData(data, fileName + 6);
saveData(data, fileName + 7);

Answer 1

What you are trying to do is called a "carpet-bomb".

It consists in flooding the user's disk with a lot of files until it runs out of space.
In itself, the security risk is quite low even though it may lead to a system crash, it's more boring than any dangerous.
But still, there might be some situations where it can lead to unexpected flaw, like it was the case with the "Safari carpet-bomb" attack.
And maybe more importantly, that's rarely a good UX to have loads of files piling up in the downloads folder along with other unrelated files.

So browsers are actually quite open to tamper this issue, and most have some system in place to avoid this.

---

Now, there are probably a lot of workarounds to these tamper-systems, but I don't feel it's what you need.

You asked "if there is a better solution than [your] current approach", and the answer is a big YES.

If all your files are available to download in a single click, then pack them in a single file to download.

You can do so by generating a zip file from all your Blobs using one of the many zipping library, or even other compression algorithm depending on your target-clients.

const blobs = "This is a sample text that will get split in chunks of separate text files"
  .split(' ')
  .map((txt) => new Blob([txt])); 

const zip = new JSZip();
const folder = zip.folder('some-words');

blobs.forEach((blob, i) =>
  folder.file(`a-word_${i}.txt`, blob)
);

zip.generateAsync({type : "blob"})
  .then(zip_blob => {
    dl.href = URL.createObjectURL(zip_blob);
    dl.download = "myfiles.zip";
  });

<!-- using JSZip library https://stuk.github.io/jszip/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<a id="dl">download</a>