Loading ajax file size on progress

Question

I am posting this question as continuation of this

Backbone Collection

collection = Backbone.Collection.extend({
    url:fetchedUrl,
    model:model,
    parse:function(response){
    return response;
    }
});
source = new collection;
  source.fetch({
  success:function(a,b,c){
    ajaxLoad(c);
    var Table = new TableView({collection:source});
    Table.render();
  }
});

Another Function

function ajaxLoad(call){

console.log(call);

// Output : Object { success: .fetch/options.success(), parse: true, error: wrapError/options.error(), emulateHTTP: false, emulateJSON: false, xhr: Object }

console.log(call.xhr.getResponseHeader('Content-Length') + ' bytes');

//Output 420358 bytes

}

I was able to get the total file size. But i want to show the progress of loading of data. How much size is loaded.

Example :

100 bytes / 420358 bytes

200 bytes / 420358 bytes

300 bytes / 420358 bytes

400 bytes / 420358 bytes

500 bytes / 420358 bytes ....

I got the value 420358. How will i get the values of 100, 200 etc.,

Answer 1

Content-Length is giving you the total length it won't help you here. Also it's not gonna work since the "success" function is executed when the request has ended and your result has been sent from the server.

Here is a work around overriding the fetch function with Jquery

var SomeView = Backbone.View.extend({
    loadStuff: function(){
        var self = this;
        someModel.fetch({
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.onprogress = self.handleProgress;
                return xhr;
            }
        });
    },
    handleProgress: function(evt){
        var percentComplete = 0;
        if (evt.lengthComputable) {  
            percentComplete = evt.loaded / evt.total;
        }
        //console.log(Math.round(percentComplete * 100)+"%");
    }
});

I had this idea but I have to admit I took the implementation/code exemple here. Backbone.js progress bar while fetching collection

I hope it helps.