How to know how much of a file is downloaded from Javascript

Question

I have a big data file of size 8 MB. Now while my page is downloading it from the server, I would like to present a status update on how much is downloaded, e.g. 56% is downloaded. The data file in itself is a .js file!

I would like to do it from my javascript. I was thinking of the below option.

1) First measure network speed.
2) Then do a linear interpolation as I know the size of the file.

But measuring netspeed in JS is not very reliable given connection timing, caching, rendering etc etc.

Is there any direct approach, where I can straightway get the size of the partially downloaded file and calculate how much is downloaded so far.

Thanks for your help!

You could load if after page load with an httprequest and use the onreadystatechange event to show percentage complete — juvian, Mar 11 '15 at 17:40
http://stackoverflow.com/questions/399641/ajax-page-download-progress — Subin Sebastian, Mar 11 '15 at 17:55
@user3001408 this should help: http://stackoverflow.com/questions/21279534/how-to-know-external-js-is-loaded-or-not-and-put-percentage-loader-until-that-ti — juvian, Mar 11 '15 at 18:01

Subin Sebastian · Answer 1 · 2015-03-11T17:48:56.670

0

You can use xmlhttprequest progress event to find out file upload progress in a HTML5 compatible browser.

var oReq = new XMLHttpRequest();

oReq.upload.addEventListener("progress", updateProgress, false);
// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
 }
}

https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

edited Mar 11 '15 at 17:48

answered Mar 11 '15 at 17:42

Subin Sebastian

10,870
3
37
42

1

op asked for download, not upload ;) – juvian Mar 11 '15 at 17:43
I am downloading the file, not uploading – user3001408 Mar 11 '15 at 17:44
Oops :-), but according to link you can use this event for download as well. But I am not sure for eg: how a browser can know file size in advance. – Subin Sebastian Mar 11 '15 at 17:47

How to know how much of a file is downloaded from Javascript

1 Answers1