Firefox downloading multiple files at once not pos

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);

It seems to work with following change, but the question is what would be the real profesional solution to this?

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);
setTimeout(function(){ saveData(data, fileName + 0) }, 1000);
setTimeout(function(){ saveData(data, fileName + 1) }, 2000);
setTimeout(function(){ saveData(data, fileName + 2) }, 3000);

It also works using 1,2,3ms as parameter with this many files, but with more files it started working with 100ms, with less some of the files would be "eaten" by the browser.

What I suppose is that browsers have a treshhold under they "merge" click or loading events, it's the question now what would this treshhold for each browser be and if there is a better solution than my current approach?

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>