File Upload using AngularJs theme Angle

Question

So I am using the Filer Uploader provided by the Angle theme: URL

By using the provided code I have successfully uploaded one picture but when I tried to implement two uploaders on the same page I only succeeded to save one picture. I mention that the initial code is not written by me and I can't completely understand it. HTML:

<input name="logo" ng-model="shop.settings.logo" filestyle="" type="file" data-button-text="Browse" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="form.uploader" class="form-control" />
<input name="banner" ng-model="shop.settings.banner" filestyle="" type="file" data-button-text="Browse" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="form.uploader" class="form-control" />

Angular Controller:

if($scope.form.uploader.queue.length != 0)
                    {
                        uploader.uploadItem($scope.form.uploader.queue[0]);
                        uploader.onCompleteItem = function(fileItem, response, status, headers) {
                            $scope.shop.settings.logo = response.file.url.split('/')[response.file.url.split('/').length - 1];
                        };
                        uploader.uploadItem($scope.form.uploader.queue[1]);
                        uploader.onCompleteItem = function(fileItem, response, status, headers) {
                            $scope.shop.settings.banner = response.file.url.split('/')[response.file.url.split('/').length - 1];

                        };
                        uploader.onCompleteAll= function() {
                            TestService.saveTest($scope.shop).then(function(response) {
                                    angular.forEach(response.data.errors, function (value, key) {
                                        Notify.alert(value, {status: 'danger', timeout: 1000});
                                    });                               
                                $scope.formSubmitted = false;
                            })
                        };
                    }

I only get the $scope.shop.settings.banner Any ideas and help is welcomed! Thank you for your time.

Answer 1

You are overwritting

uploader.onCompleteItem

The seconds function to handle banner is overwriting it.

UPDATE: Answering how it is done. Since I don;t have a plnkr to start with or known libraries and their versions I am going to have to put generic solution that is meant to provide the answer in concepts and a real working thing.

Try something on the lines of this:-

Option 1

    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        if (fileItem == SOME PROPERTY THAT IDENTIFIES LOGO)   {
            // do something with logo $scope.shop.settings.logo 

       } 
        if (fileItem == SOME CONDITION THAT IDENTIFIES BANNER)   {
            // do something with logo $scope.shop.settings.banner

       } 

    };
    uploader.uploadItem($scope.form.uploader.queue[0]);
    uploader.uploadItem($scope.form.uploader.queue[1]);

Option 2

    var logoFileItem = $scope.form.uploader.queue[0];
    logoFileItem.onSuccess= function(response, status, headers) {
        //do something regarding logo
    }; 

    var bannerFileItem = $scope.form.uploader.queue[1];
    bannerFileItem .onSuccess= function(response, status, headers) {
        //do something regarding banner
    };
    uploader.uploadItem(logoFileItem);
    uploader.uploadItem(bannerFileItem);