$http eventHandlers return $rootScope rather than actual XHR event 1.5.4

[ghost]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?
BUG

What is the current behavior?
eventHandlers:{"progress":function (e) {
console.log(e);
}},
uploadEventHandlers: {"progress": function (e) {
console.log(e);
}}

console.log responds with $rootScope

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

attach event handlers for progress to $http post call that uploads a file to the server
upload the file and try to listen for progress info none of the progress information is being passed.

What is the expected behavior?

console.log would return the actual xhr event not $rootScope

What is the motivation / use case for changing the behavior?

I have been waiting 2 years for Angular to track the "progress" event and it still cant get it right?!?!

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

1.5.4 all major browsers Mac and PC

Other information (e.g. stacktraces, related issues, suggestions how to fix)

[Narretz]

I have been waiting 2 years for Angular to track the "progress" event and it still cant get it right?!?!

What kind of attitude is that? See it like this, you had 2 years to provide a PR.

[ghost]

What kind of attitude is that? See it like this, you had 2 years to provide a PR.

True, totally agree I didn't provide a PR that doesn't change the fact the bug exist where it shouldn't as this issue was in development for a long time.

[gkalpak]

@ghost, this feture was obviously not in development for two years - being in the backlog and low-priority and being in development are not the same thing.
(I hope we wouldn't need 2 years of active development to complete that feature 😃)

That said, if there is a bug, we should totally fix it. Thx for reporting it 👍

[buraktamturk]

I was very excited when I saw the 1.5.4 release, i check the releases almost every day for this feature since my post #11547 (comment) at #11547 (the PR was opened in Apr 11, 2015)

It also includes a workaround (it is an hack, but you can't just rewrite token refreshing mechanism, based on custom wrapper around $http, to get around of this hack, can you?).

Here is the beauty of the hack: you can't archive something like this via $http without the hack

[gkalpak]

Well. there's a PR with a fix in place (#14438), it should be fine by the time v1.5.5 is out 😃

[petebacondarwin]

Hopefully that will fix this wrinkle :-) 21 hours is a bit better than 2 years, eh?

[buraktamturk]

we'll wait for the 1.5.5 anyway :D

[petebacondarwin]

Thank you for your patience @buraktamturk - it is a virtue I am told :-)

[songbaoqiang]

eventHandlers:{"progress":function (e) {
console.log(e);
}},
uploadEventHandlers: {"progress": function (e) {
console.log(e);
}}

are not fired in 1.5.5 1.5.6 1.5.7 15.8

[buraktamturk]

@songbaoqiang Could you provide an example? I am sure that the upload event thing works on my projects.

[songbaoqiang]

html

<script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>

×

Please choose your file

    <div class="modal-body">
      <div class="form-inline">
            <input type="file" class="form-control" ng-model="FM.uploadFile">
      </div>
       <br>

      <div class="progress progress-striped">
          <div class="progress-bar progress-bar-success" role="progressbar"
                aria-valuenow="{FM.uploadprogress}}" aria-valuemin="0" aria-valuemax="100"
                style="width: {{FM.uploadprogress}}%;">
                <span class="sr-only">{{FM.uploadprogress}}% done</span>
         </div>
      </div>


    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal"  ng-click= "FM.cancelupload()" >cancel</button>
      <button type="button" class="btn btn-primary"  ng-disabled="!FM.uploadFile" ng-click="FM.upload()">upload</button>
    </div>
  </div>
</div>

......

js

var FMApp = angular.module('FMApp', ['ur.file']);

FMApp.controller('FileManagerCtr', ['$scope', '$http', '$location','$q',
function ($scope, $http, $location,$q) {
var FM = this;
.........

var canceller = $q.defer();

FM.upload = function () {
console.log('Upload File:', FM.uploadFile);
var formData = new FormData();
formData.append('upload', FM.uploadFile);
var myurl = 'api' + FM.curFolderPath + FM.uploadFile.name;

  var postParams = {
       method: 'POST',
       url: myurl,
       data: formData,
       headers: {'Content-Type': undefined },
       type:'UPLOAD_FILE',
       transformRequest: angular.identity,
       uploadEventHandlers: {
              progress: function (e) {
                 if (e.lengthComputable) {
                       FM.uploadprogress =  (e.loaded / e.total) * 100;
                 }
              }
       },
  };

  var sendPost = $http(postParams);
  sendPost.success(function (data) {
       FM.successData = data;
       handleHashChange(FM.curHashPath);
   })
   .error(function (data, status) {
      FM.errorData = ' ' + status + ': ' + data;
    });

};

[jbouhier]

@songbaoqiang We can add 1.5.10 to the list. eventHandlers and uploadEventHandlers are never triggered. Thus the need for a PR to fix it is still relevant to this day.