Angular.js: $http eventHandlers return $rootScope rather than actual XHR event 1.5.4

Created on 14 Apr 2016 · 12Comments · Source: angular/angular.js

_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)

$http low broken expected use bug

Source

ghost

Most helpful comment

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.

Narretz on 14 Apr 2016

👍4

All 12 comments

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.

Narretz on 14 Apr 2016

👍4

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.

ghost on 14 Apr 2016

@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 :smiley:)

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

gkalpak on 14 Apr 2016

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 https://github.com/angular/angular.js/pull/11547#issuecomment-203157445 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
screen shot 2016-04-14 at 23 59 08

buraktamturk on 14 Apr 2016

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

gkalpak on 14 Apr 2016

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

petebacondarwin on 15 Apr 2016

we'll wait for the 1.5.5 anyway :D

buraktamturk on 15 Apr 2016

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

petebacondarwin on 15 Apr 2016

😄1

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

songbaoqiang on 13 Sep 2016

👍1

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

buraktamturk on 13 Sep 2016

html

    <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;
    });

};

songbaoqiang on 14 Sep 2016

@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.