$scope.upload progress/success callbacks not working

[Matthew Leak]

I have the angular-file-upload script and it's posting to my express app which is then saving the file, so the good news is that the script is working... However, for some reason the progress/success callbacks don't seem to be doing anything at all and my developer console just remains blank...?

$scope.onFileSelect = function ($files) {
                var file = $files;
                $scope.upload = $upload.upload({
                    url: '/upload',
                    data: {myObj: $scope.myModelObj},
                    file: file
                }).progress(function (evt) {
                    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                }).success(function(data, status, headers, config) {
                    console.log(data);
                });
        };

[Danial Farid]

So how do you know the script is working?

[Danial Farid]

It is better to send files one by one:

...
var file = $files[0];
....

[Danial Farid]

what browser do you have this problem with?

[Matthew Leak]

I'm only sending one file, I'm using Chrome and I've got the success function working, just not progress. The app is a MEAN app so I'm using busboy to handle the file server-side. I'm wondering if it's because I'm working locally so the file uploads are going to be instant. Is there a timeout set for the progress callback?

[Danial Farid]

make sure you include the shim file before angular.js.
Even if it is fast the progress function should be called with 100%.

[Matthew Leak]

My bad, I didn't include the shim! * facepalm *

Is there anyway I can force slug the upload so I can work on a 'progress' script? It's incredibly difficult to work on locally as it's so rapid.

[Ludovic HENIN]

As bad as you leaky :(
thanks @danialfarid for the awesome

[Snigdha Batra]

Same problem, shim file is loaded, but progress callback is not being fired, working on local

[Ludovic HENIN]

Are you sure it is loaded before Angular ?

[Snigdha Batra]

Yes its loaded before
But window.XMLHttpRequest.__isShim gives undefined to me
And files are not the min version.

This is the file load order:

    <script src="{% static 'bower_components/lodash/dist/lodash.compat.js' %}"></script>
    <script src="{% static 'bower_components/moment/moment.js' %}"></script>
    <script src="{% static 'bower_components/ng-file-upload/angular-file-upload-shim.js' %}"</script>
    <script src="{% static 'bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'bower_components/ng-file-upload/angular-file-upload.js' %}"></script>

[Snigdha Batra]

Tried debugging with breakpoints. It is getting loaded, the variable is set to true, but later on gets overridden and becomes undefined again.
Looks like window.XMLHttpRequest's definition is being changed somewhere.

[Mohammed Taher]

have same issue , progress function is never called , only the promise success , and error functions are invoked right.

[sita1]

in my case progress and success working on local machine but success not working when connect to server

[diogomunhos]

Same here, progress function is never called

[Raphael Bolliger]

I have the same problem.
Maybe its a serverside problem? I use the new ASP.NET Core MVC Framework.

[Dan W]

I'm having this issue as well, callbacks (particularly in Firefox) are not being called. If I remove the "progress" callback and leave only the success handler it starts working again in FF, but I need to maintain progress. In the code below, the .then() for success is never reached in Firefox. If I remove the .progress() function such that there is only a .then() it seems to start working in FF (without progress).

attachmentService.uploadAttachment($files[i]).progress(function(evt) {
var progress = parseInt((100.0 * evt.loaded / evt.total).toString(), 10);
attachments[index].percentUploaded = progress;
}).then(function(res) {
if (res && res.data && res.data.attachmentResponse) {
attachments[index].link = res.data.attachmentResponse.link;
delete attachments[index].percentUploaded;
}
}, function(res) { // something went wrong
console.log("something went wrong with upload");
}
});

I'm using ng-file-upload 12.2.12, Typescript (ES6) and webpack. I'm loading ng-file-upload from npm, and it looks like ng-file-upload-all already includes the shim as needed, what am I doing wrong? Because im using ES6 modules its highly likely that angular is getting loaded before the shim/ng-file-upload, do I need to force the loading of ng-file-upload before angular? or just the shim needs to load before angular?

[Dan W]

After further investigation it seems that in Firefox the progress callback is being called once additionally AFTER the success callback, causing the percentUploaded value to once again be set, and messing up the display of the UI. This does not happen in Chrome 52. I changed the code as such to add a guard for this condition and it fixed the issue with the extra progress callback, hopefully this helps someone:

attachmentService.uploadAttachment($files[i]).progress(function(evt) {
var progress = parseInt((100.0 * evt.loaded / evt.total).toString(), 10);
if(attachments[index].percentUploaded != progress) {
attachments[index].percentUploaded = progress;
}
}).then...

Sry about the formatting, not sure why its killing my whitespaces!

[Hai-Dang NGUYEN]

I have the same problem. Anyone fixed this?

[François Guthmann]

Same problem here still today, shim imported before angular. I have the success callback called but not the progress. I'm wondering if my server is doing something wrong too.

EDIT: Got it working, the fault was on angular. Downloaded another version of the script and it worked. No idea why.