AngularJS toaster shows alert twice instead of one time on file upload

Question

I'm using toaser to inform user that file was successfully uploaded. The problem is that toaster shows message twice.

Parts of my HTML code:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-animate.min.js" ></script>
<script src="../common/toaster.js"></script>
<script src="../common/ng-file-upload.min.js"></script>
<script src="../common/ng-file-upload-shim.min.js"></script>
<script src="../common/angular-sanitize.min.js"></script>
<script src="messages.controller.js"></script>
<script src="../common/cookieGet.js"></script>
...
<table class="sendFile" ng-show="hiddenFriendId != null" style="overflow-y: auto; overflow-x: hidden; height:100px; width:100%;">
            <tbody>
                <tr>
                    <td style="vertical-align: top;">
                        <div 
                        width = "100%"
                        ngf-select="" 
                        ngf-drop="" 
                        ng-model="files" 
                        class="drop-box"
                        ngf-drag-over-class="{ accept:'dragover', reject:'dragover-err', delay:100}"  
                        ngf-multiple="true" ngf-allow-dir="false"
                        ngf-max-size="10MB" ngf-max-files="10" 
                        accept="image/*,application/pdf" 
                        ngf-pattern="'image/*,application/pdf'">
                            Click here <b>OR</b> drag&drop pdfs or images
                        </div>
                        <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

                        <div ng-show="files.length>0">
                            <div ng-repeat="f in files"> 
                                <progressbar ng-show = "f.progressPercentage > 100"> 
                                    <bar style="width:{{f.progressPercentage}}%;">
                                        Upload: {{f.name | limitTo:50 }} {{f.$error}} {{f.$errorParam}} - {{ f.progressPercentage }}% completed
                                    </bar>
                                </progressbar>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

And here is my JS part for file upload:

$scope.upload = function (files) {
   var urlUploadFile = "http://localhost:8180/ChatRestNoSQLMaven/rest/MessageService/upload/";
   var progressPercentage = 0;
   if (files && files.length) {
       for (var i=0; i < files.length; i++) {
          var file = files[i];
          if (!file.$error) {
             Upload.upload({
               url: urlUploadFile,
               data: {
                   securityKey: securityKey,
                   friendId: $scope.hiddenFriendId,
                   file: file  
               }
           }).then(function (resp) {
                $timeout(function () {
                });
           }, function (response) {
                if (response.status > 0) {
                   $scope.errorMsg = response.status + ': ' + response.data;
                   toaster.pop("error","Error","Unable to upload file. Please try again...");
                }
           }, function (evt) {
                var loaded = evt.loaded;
                var total = evt.total;
                var number = 100.0 * (evt.loaded / evt.total);
                if (number == 100){
                    toaster.pop("success","File uploaded","File " + file.name + " successfully uploaded");
                }
                file.progressPercentage = number.toFixed();
           });
          }
       }
   }
}

So, can anybody help me to avoid this problem and throw the toaser alert only once. Thank you!

Answer 1

From the Javascript code section under https://github.com/danialfarid/ng-file-upload/blob/master/README.md#-usage, you can see that the THIRD callback in the Upload.upload().then(...) block is used to update the progress meter. It's not guaranteed to run just once.

You should, instead, try putting your toaster code in the FIRST callback where you have $timeout(...) currently to help isolate the issue.

Answer 2

Have you post the file cross domain?if you do,the browser will do twice request:first time is the OPTION request,seconde time is the real POST request.Check it in the Network of the devtools of the browser to make sure how many request the browser do.