Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

$scope.upload progress/success callbacks not working #224

Closed
leaky opened this issue May 25, 2014 · 19 comments
Closed

$scope.upload progress/success callbacks not working #224

leaky opened this issue May 25, 2014 · 19 comments

Comments

@leaky
Copy link

leaky commented May 25, 2014

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);
                });
        };
@danialfarid
Copy link
Owner

So how do you know the script is working?

@danialfarid
Copy link
Owner

It is better to send files one by one:

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

@danialfarid
Copy link
Owner

what browser do you have this problem with?

@leaky
Copy link
Author

leaky commented May 26, 2014

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?

@danialfarid
Copy link
Owner

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

@leaky
Copy link
Author

leaky commented May 27, 2014

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.

@leaky leaky closed this as completed May 30, 2014
@ludohenin
Copy link

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

@snig-b
Copy link

snig-b commented Nov 28, 2014

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

@ludohenin
Copy link

Are you sure it is loaded before Angular ?

@snig-b
Copy link

snig-b commented Nov 28, 2014

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>

@snig-b
Copy link

snig-b commented Nov 28, 2014

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.

@justgeek
Copy link

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

@sita1
Copy link

sita1 commented Jul 4, 2016

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

@diogomunhos
Copy link

Same here, progress function is never called

@raphibolliger
Copy link

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

@dwasyluk
Copy link

dwasyluk commented Oct 21, 2016

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?

@dwasyluk
Copy link

dwasyluk commented Oct 21, 2016

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!

@phidang
Copy link

phidang commented Mar 25, 2017

I have the same problem. Anyone fixed this?

@frguthmann
Copy link

frguthmann commented Dec 11, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests