Ajax - Get size of file before downloading

Question

Basically, I want to figure out whether I should download a file using AJAX, depending on how large the filesize is.

I guess this question could also be rephrased as: How do I get only the header of an ajax request?

---

EDIT: ultima-rat0 in the comments told me of two questions that had already been asked that apparently are the same as this one. They are very similar, but they both want jQuery. I want a non-jQuery solution to this.

Answer 1

You can get XHR response header data manually:

http://www.w3.org/TR/XMLHttpRequest/#the-getresponseheader()-method

This function will get the filesize of the requested URL:

function get_filesize(url, callback) {     var xhr = new XMLHttpRequest();     xhr.open("HEAD", url, true); // Notice "HEAD" instead of "GET",                                  //  to get only the header     xhr.onreadystatechange = function() {         if (this.readyState == this.DONE) {             callback(parseInt(xhr.getResponseHeader("Content-Length")));         }     };     xhr.send(); }  get_filesize("http://example.com/foo.exe", function(size) {     alert("The size of foo.exe is: " + size + " bytes."); }); 

Answer 2

Sometimes HEAD can act differently than GET so I suggest something like this that aborts the request after getting Content-Length header:

new Promise(resolve => {     var xhr = new XMLHttpRequest();     xhr.open('GET', '/a.bin', true);     xhr.onreadystatechange = () => {         resolve(+xhr.getResponseHeader("Content-Length"));         xhr.abort();     };     xhr.send(); }).then(console.log);