Angularjs $http and progress bar

Question

I need to upload file and I use $http (this code is get from my .service() function):

sendFile: function (params) {             return $http({method : 'post',                 url : 'http://XXXXXXXXXXXXX/rest/file.json',                 headers : { 'X-CSRF-Token' : $cookies['csrftoken']},                 data : params             })         }, 

Now, for little file and a good line there is no problem, but with a big file and/or a bad/slow line there is a problem of UI: user can not know when upload will be end. I need a progress bar.

So I have search on internet, but I have not found a solution. Is there a possibility to get some progress/notification from $http ?

I have tried this code without luck:

ProfileService.sendFile(data)                     .then(function(ret) {                             var uri = ret.data.uri;                             scope.content = "Upload finished";                              scope.postForm.fid = ret.data.fid;                             scope.postForm.buttonDisabled = false;                         },                         function(error) {                             scope.postForm.showError = true;                             scope.postForm.errorMsg = error.data;                         },                         function(progress) {                             console.log("inside progress");                             console.log(progress)                         }                     ); 

“progress” function is never called.

I'm using angular 1.2.x

Thanks.

Answer 1

You can use Angular Loading Bar. It works automatically for $http requests and does not need any setup except adding it as app dependency.

angular.module('app', ['angular-loading-bar']); // that's all 

Answer 2

I would highly recommend ng-progress. This handles multiple requests and basically shows a neat little progress bar for all http activity.

http://victorbjelkholm.github.io/ngProgress/