How to Let a User Download Multiple Files When a Button Is Clicked

How can I let a user download multiple files when a button is clicked?

The best way to do this is to have your files zipped and link to that:

The other solution can be found here: How to make a link open multiple pages when clicked

Which states the following:

HTML:

<a href="#" class="yourlink">Download</a>

JS:

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('mysite.com/file1');
    window.open('mysite.com/file2');
    window.open('mysite.com/file3');
});

Having said this, I would still go with zipping the file, as this implementation requires JavaScript and can also sometimes be blocked as popups.

Download multiple files with a single action

HTTP does not support more than one file download at once.

There are two solutions:

• Open x amount of windows to initiate the file downloads (this would be done with JavaScript)
• preferred solution create a script to zip the files

How to download multiple files in JS

This is an undesired behavior which will be detected by all Pop-Up blockers. Single click can create single action. Also downloading multiple files can hide many files from user and look like malware attack.

Best way is to zip files or if zipping is unavailable show all the files with their own download link. This way the user knows what is he downloading.

Multiple file download using javascript not working

I have solved it with following code-->
Maybe it helps somebody.

function download_files(files) {
function download_next(i) {
 if (i >= files.length) {
   return;
 }
 var a = document.createElement('a');
 a.href = files[i].download;
 a.target = '_blank';

 if ('download' in a) {
   a.download = files[i].download;
 }

 (document.body || document.documentElement).appendChild(a);
 if (a.click) {
   a.click(); // The click method is supported by most browsers.
 }
 else {
    window.open(files[i].download);
 }
 console.log('1');
 a.parentNode.removeChild(a);
 setTimeout(function() {
   download_next(i + 1);
 }, 5000);
}
// Initiate the first download.
download_next(0);
}

function do_dl() {
 download_files([
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
   { download: "https://www.example.com"},
 ]);
};


do_dl();

Javascript - Download multiple links in one click

Use download attribute to assign filename to each a tag
that will trigger mulltiple download in browser

const downloadAll = () => {
  const allLinks = document.querySelectorAll('a');

  for (i=0; i<= allLinks.length; i++) {
    var each = allLinks[i]
    each.download = each.href
    each.click()
  }
}