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

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
– juvian, Commented Mar 11, 2015 at 17:40
stackoverflow.com/questions/399641/ajax-page-download-progress — Subin Sebastian
– Subin Sebastian, Commented Mar 11, 2015 at 17:55
@user3001408 this should help: stackoverflow.com/questions/21279534/… — juvian
– juvian, Commented Mar 11, 2015 at 18:01

Subin Sebastian · Accepted Answer · 2015-03-11 17:48:56Z

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, 2015 at 17:48

answered Mar 11, 2015 at 17:42

Subin Sebastian

11k3 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

juvian Over a year ago

op asked for download, not upload ;)

user3001408 Over a year ago

I am downloading the file, not uploading

Subin Sebastian Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related