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

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)

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

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

fix($http): pass event object to `eventHandlers`/`uploadEventHandlers`

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

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

fix($http): pass event object to `eventHandlers`/`uploadEventHandlers`

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

we'll wait for the 1.5.5 anyway :D

@buraktamturk

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

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

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

html

×

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

};

@songbaoqiang

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

fix($http): pass event object to `eventHandlers`/`uploadEventHandlers`

Navigation Menu

Repository navigation

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

html

Please choose your file

js

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

Narretz commented on Apr 14, 2016

gkalpak commented on Apr 14, 2016

buraktamturk commented on Apr 14, 2016

gkalpak commented on Apr 14, 2016

petebacondarwin commented on Apr 15, 2016

buraktamturk commented on Apr 15, 2016

petebacondarwin commented on Apr 15, 2016

songbaoqiang commented on Sep 13, 2016

buraktamturk commented on Sep 13, 2016

songbaoqiang commented on Sep 13, 2016

html

Please choose your file

js

jbouhier commented on Feb 9, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions