How to track progress using eventHandlers and uploadEventHandlers in angularjs 1.5.5 with $ http or $ resource?

Question

I am trying to strictly adhere to angularjs code using $ http or $ resource to upload files.

var uploadData = new FormData(); uploadData.append('file', obj.lfFile); var fileData = angular.toJson({ 'FileName': obj.lfFile.name, 'FileSize': obj.lfFile.size }); uploadData.append('fileData', fileData) $http({ method: 'POST', url: vm.uploadPath, headers: { 'Content-Type': undefined, 'UserID': vm.folder.UserID, 'ComputerID': vm.folder.ComputerID, 'KeepCopyInCloud': vm.keepCopyInCloud, 'OverWriteExistingFile': vm.overwriteExistingFile, 'RootFileID': vm.folder.RootFileID, 'FileName': obj.lfFile.name, 'FileSize': obj.lfFile.size }, eventHandlers: { progress: function(c) { console.log('Progress -> ' + c); console.log(c); } }, uploadEventHandlers: { progress: function(e) { console.log('UploadProgress -> ' + e); console.log(e); } }, data: uploadData, transformRequest: angular.identity }).success(function(data) { console.log(data); }).error(function(data, status) { console.log(data); console.log(status); }); 

Events do not fire at all. What am I missing?

References

• https://github.com/angular/angular.js/issues/14436
• https://github.com/angular/angular.js/pull/11547

Answer 1

Found it after sending the request. Feeling stupid. I had to update the version of angularjs in bower to ensure that all dependencies are resolved on angular 1.5.5 and higher.

reference Information