Automatic Multiple Download No Longer Working On Chrome

Question

We produce browser based communication software that companies use for consultations. At the end of a consultation, the consultant can download recordings of the video streams. Since Chrome updated to version 65, the multiple file download only offers the last file.

We show a list of saved sessions & when the user clicks "Download" we loop through all recordings for that session and download them like in this SO solution: JavaScript blob filename without link

var saveBlobAs = function(blob, filename){
        var url = window.URL.createObjectURL(blob);

        var a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    };

for(var i = 0; i < matchedRecordings.length; i++){
        var recording = matchedRecordings[i];
        saveBlobAs(recording.blob, fileName);
    }

The code still works perfectly on FireFox but Chrome 65 only ever offers the last file. I could fix it by changing the link creation to

var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.target = '_BLANK'; // Added this
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);

But now Chrome sees it as a popup and opens new tabs for each file.

Has anybody else had the same problem? Is there a better solution than opening each link in a new tab?

Answer 1

I think you just need to add a pause to get around chrome detecting multiple downloads. Here's an example with buttons with and without pauses.

I never got the "only last file" issue, but it did stop after the tenth file. Adding a pause made all download dialogs appear (chrome 68).

Get rid of the target and implement the loop with an await (or some sort of hideous Promise callback thing if you need to support <ES6).

So you'd call with saveBlobs(matchedRecordings, 200), but you might need to change the function a little since your data has a .blob and all share the same filename, apparently.

async function saveBlobs(blobs, wait) {
  for (let blob of blobs) {
    saveBlob(blob[0], blob[1]);
    if (wait)
      await new Promise(resolve => setTimeout(() => resolve(), wait));
  }
}

function saveBlob(blob, name) {
  //create the initiator
  var download = document.createElement('a');
  download.href = URL.createObjectURL(blob);
  download.download = name;

  //fire it off
  document.body.appendChild(download);
  download.click();
  setTimeout(() => download.remove());
}