angular-file-upload update scope onCompleteItem

Question

So i have a value in my scope called $scope.selectedComponent

Then i have the following uploader:

    var uploader = $scope.uploader = new FileUploader({
    url: 'user_resources/upload.php',
    formData: [{module_id: $state.params.id, component: $scope.selectedComponent}]
});

// FILTERS

uploader.filters.push({
    name: 'customFilter',
    fn: function(item /*{File|FileLikeObject}*/, options) {
        return this.queue.length < 10;
    }
});

// CALLBACKS

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
    console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
    console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
    console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
    console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
    console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
    console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
    console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
    console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
    console.info('onCompleteAll');
};

The callback function: onCompleteItem is where i want to update the selectedComponent object however within the scope of that function i am unable to get the variables of scope

My question is how will i be able to update my variable after the file has uploaded?

Michel · Accepted Answer · 2015-03-17 06:45:57Z

2

make sure that the $scope is loaded in your controller:

.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {

and after that you can update the value of the $scope.selectedComponent from anywhere in this controller.

$scope.selectedComponent = "not uploaded";

    uploader.onCompleteItem = function (fileItem, response, status, headers) {
                  $scope.selectedComponent = "upload complete";
};

edited Mar 17, 2015 at 6:45

answered Mar 16, 2015 at 7:46

Michel

1036 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DavidPostill Over a year ago

Could you please edit your answer to give an explanation of why this code answers the question? Code-only answers are discouraged, because they don't teach the solution.

Michel Over a year ago

@MarcRasmussen try putting a console.log($scope.selectedComponent) in the onCompleteItem function, and check if the value has been updated. and also post the errors if there's any in the logs?

Hiren · Accepted Answer · 2017-01-25 10:49:40Z

1

You can get your scope this way

var scope = angular.element(document.getElementById('MyCtrl')).scope();

Haven't test it, but it should work.

edited Jan 25, 2017 at 10:49

Hiren

12.8k7 gold badges54 silver badges72 bronze badges

answered Mar 14, 2015 at 7:25

Raul Claus

2901 silver badge7 bronze badges

1 Comment

Raul Claus Over a year ago

what message are you getting?

Collectives™ on Stack Overflow

angular-file-upload update scope onCompleteItem

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related