JavaScript Download Multiple Files

This JavaScript code snippet helps you to create a multi-file downloader. It downloads multiple files from the given URLs using AJAX requests and the Blob API. The downloadAll() function iterates through the urls array and calls the forceDownload() function for each URL. The forceDownload() function sends an AJAX request to the server to get the file as a blob, creates a URL for the blob using the Blob API, and then creates a new <a> tag with the URL and file name.

Finally, it simulates a click on the link to trigger the browser’s download behavior and then removes the link from the page.

How to Download Multiple Files in JavaScript

First of all, create a button element with the class name “download” and call the "downloadAll()" function inside the onclick event attribute.

<button class= "download"onclick="downloadAll()">
  Download
</button>

Now, use the following CSS rules to style the download button. These CSS styles are optional, you can use your own according to your needs.

.download{
padding: 30px;
border-radius: 10px;
color: white;
font-weight: 900;
font-size: 1.3rem;
background-color: silver;
border: none;
}

Finally, place the links of files inside the urls array and add the following JavaScript code to your project to activate downloadAll function. You can use multiple types of files inside the urls array, like pdf, jpeg, png, pdf, etc.

var urls = [
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg', 
];

function downloadAll() {


  for (var i = 0; i < urls.length; i++) {
    forceDownload(urls[i], urls[i].substring(urls[i].lastIndexOf('/')+1,urls[i].length))
  }
}
function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

Code Explanation

The downloadAll() function loops through the urls array using a for loop. It calls the forceDownload(url, fileName) function on each URL. The forceDownload() function takes two arguments: url and fileName.

Inside the forceDownload() function, an XMLHttpRequest object is created, and the open() method is used to specify the HTTP method and URL to be used in the request. The responseType property of the object is set to “blob” to indicate that the response should be treated as a binary large object (BLOB).

When the XMLHttpRequest object’s onload() event is triggered, the response is converted into a URL using createObjectURL() method, which creates a temporary URL for the response. A new anchor (<a>) tag is then created, and the href attribute is set to the temporary URL. The download attribute of the anchor tag is set to the file name extracted from the url. This creates a download link for the image file.

Finally, the anchor tag is appended to the document.body element, clicked using tag.click(), and then removed from the document.body element using document.body.removeChild(tag).

That’s all! hopefully, you have successfully created the download multiple files functionality using this JavaScript code. If you have any questions or suggestions, feel free to comment below.