In this article we will show you the solution of download file using JavaScript, we will look towards that how we can use JavaScript’s XMLHttpRequest object for downloading files from a URL.

A built-in browser object called XMLHttpRequest enables asynchronous HTTP queries to be made in order to fetch resources from a server.

In this article we will go step-by-step through for knowing the process of file downloader, either it could be for images, documents or any other type of file.

We'll design a download function that configures XHR, manages events like onload, onprogress, and onerror, and starts the download by triggering a click event on a dynamically generated anchor element.

Step By Step Guide On Download File Using JavaScript :-

function downloadFile (url, fileName) {
    const request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "blob";
    request.onload = function () {
        if (request.status === 200) {
            const fileBlob = request.response;
            const link = document.createElement("a");
            link.href = URL.createObjectURL(fileBlob);
            link.download = fileName;
            link.click();
            URL.revokeObjectURL(link.href);
            } else {
                console.error("Request failed. Status:", request.status);
                }
        };
        request.send();
    }

1. Const request = new XMLHttpRequest() is used inside the function to generate a fresh instance of the XMLHttpRequest object. An outdated technique for sending HTTP requests, XMLHttpRequest is mostly used for AJAX and file downloads.
2. The XMLHttpRequest instance's responseType field is set to "blob". This suggests that the answer information ought to be handled like a Blob object. Blobs are a common way to depict binary data, including files.
3. The XMLHttpRequest instance has the onload event handler set. As soon as the request is successfully fulfilled, this method is called. The code examines whether the request status is 200, which denotes a successful response, within the onload method.
4. The response data, which is a Blob representing the file to be downloaded, is contained in the response property of the XMLHttpRequest instance. The fileBlob variable holds this Blob.
5. When using URL.createObjectURL(fileBlob), the object URL is set as the href property of the anchor element. The file data is represented by this object URL as a Blob object.
6. Using document.body, the anchor element is added as a child to the document body.appendChild(link).
7. After the file download has begun, the object URL and resources are released using the URL.revokeObjectURL(link.href) method.
8. The send() method is use on the XMLHttpRequest object, for starting an actual request to given server. The function will not be waiting for it to get finished before continuing with its execution, Because the request we submitted is asynchronously. The onload method will be called once the request has finished, either successfully or unsuccessfully.

Conclusion :-

In this article, we had take a looked towards how we use javascript for utilising the XMLHttpRequest object to download files from URLs.

Even though XMLHttpRequest is an outdated method, it can still be helpful in some circumstances, such as maintaining legacy code or addressing circumstances where it may not be possible to use the current Fetch API.

However, the Fetch API offers a more user-friendly and adaptable method of making HTTP requests, therefore it's worth taking into account in contemporary web development.

However, becoming familiar with XMLHttpRequest will help you grasp JavaScript and web technologies better.

I hope this article on download file using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.