CODEWITHSUNDEEP
javascriptajaxangularjs
Vince Verhoeven
Vince Verhoeven

Reputation: 1793

Angularjs HTTP service POST progress event

Since most topics about this subject are over a year old, I asked myself if there are any good solutions to track an ajax progress event from an http service (for a loading bar or to track how many bytes it has downloaded). Without the use of 3rd parties :)

these events:

var ajax = new XMLHttpRequest();
ajax.addEventListener("progress")
ajax.addEventListener("load")
ajax.addEventListener("error")
ajax.addEventListener("abort")

Upvotes: 0

Views: 1034

Answers (1)

ThibaudL
ThibaudL

Reputation: 1009

I've made something like that using a promise with notify for the progress : 

var deferred = $q.defer();

var fd = new FormData();
fd.append("Filename", file.name);
fd.append("file", file);
var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function (event) {
      deferred.notify(event);
}, false);

xhr.addEventListener("load", function (data) {
     deferred.resolve(event.target.response);
}, false);

xhr.addEventListener("error", function (data) {
     deferred.reject(event.target.response);
}, false);

xhr.addEventListener("abort", function (data) {
     deferred.reject(event.target.response);
}, false);

xhr.open("POST", URL);
xhr.send(fd);

return deferred.promise;

Upvotes: 2

Related Questions