Web call in function called by stop event doesn't fire until I click on the browser window.

Damien Green

unread,

Aug 12, 2015, 3:34:54 PM8/12/15

to jQuery-File-Upload

Hi Guys,

I have a very strange problem when trying to call an Angular function (bound to $scope) after the stop callback for the JQuery File Uploader. I'm using the Uploader to upload some image files to my server. The code within the Angular controller looks like this:

$scope.ImageGallery = [];

$scope.InitialiseUploader = function () {

var fileUploaderURL = "../app_plugins/imagegallery/backoffice/uploader/server/uploaderhandler.ashx";

// Change this to the location of your server-side upload handler:

$('#fileupload').fileupload({

url: fileUploaderURL,

dropZone: $("#drop-zone"),

maxChunkSize: 1000000, // 1MB

limitConcurrentUploads: 3,

formData: {

GalleryID: $scope.GalleryID

},

dataType: 'json',

drop: function (e, data) {

$('#progress .progress-bar').css(

'width',

0 + '%'

);

},

done: function (e, data) {

// Current image uploaded

},

stop: function (e) {

// All done

$scope.RefreshGallery();

},

progressall: function (e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .progress-bar').css(

'width',

progress + '%'

);

},

fail: function (e, data) {

alert(data.errorThrown);

}

}).prop('disabled', !$.support.fileInput)

.parent().addClass($.support.fileInput ? undefined : 'disabled');

}

$scope.RefreshGallery = function() {

alert("refreshing gallery");

$http.get("/umbraco/ImageGallery/ImageGalleryApi/GetImages/" + $scope.GalleryID).

then(function (response) {

// Success

if (response.data) {

$scope.ImageGallery = angular.fromJson(response.data);

}

}, function (response) {

// Failure, umbraco will also catch this

alert("failed");

});

}

The problem is that although the stop function successfully calls the RefreshGallery function (I can see this becauase the test alert box displays "refreshing gallery"), the $http.get web call does not take place until I click in the browser window after which it executes immediately. I have tried debugging through the code and everything is called properly. During debug, and executes correctly. However as soon as I detach the the debugger and remove the alert box, attached the $http.get doesn't return until I click on the page. I have debugged the web service on the server end and can confirm that no attempt is made to even call the service until I click in the browser window.

It looks like some sort of odd threading issue and is perhaps something to do with the way in which I have written the code (I'm fairly new to Angular). I've been playing around with this for several days now and have had no luck in getting it to work automatically once the uploads are complete without clicking on the window. The way I intend it to work is to make the web call to refresh the gallery automatically as soon as it is called by the stop event on the file uploader.

If I manually bind the RefreshGallery function to a button it works every time, it just doesn't work when called from the stop function.

Does anything have any idea what I'm doing wrong? I'm obviously missing something here so an explanation would be very useful.

Many thanks,

Damien

Damien Green

unread,

Aug 12, 2015, 3:55:30 PM8/12/15

to jQuery-File-Upload

Update, if I wrap the RefreshGallery function call in a $timeout and put in a delay of 1000ms, it works. Looks like some sort of issue where the previous upload request hasn't cleared properly which somehow confuses the $http.get request. Can anyone confirm whether this is the case and whether adding a timeout is an appropriate way to resole this issue? It seems a bit hit and miss to me and doesn't feel very robust.

Damien Green

unread,

Aug 12, 2015, 6:45:24 PM8/12/15

to jQuery-File-Upload

Examining this in more detail monitoring the Javascript and the execution of the http requests, it looks like the stop event is fired before all the upload http requests have completed. If I add a timeout with a period of 0, the function works as expected. I believe this is because the function causes the get request to be put at the bottom of the queue so it executes after all the upload handlers have finished calling.