AngularJS grille-pain montre alerte deux fois au lieu d'une fois sur le téléchargement de fichier

Question

J'utilise toaser pour informer l'utilisateur que le fichier a été téléchargé avec succès. Le problème est que grille-pain montre le message deux fois.

parties de mon code HTML:

<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> 

Et voici ma part de JS pour le téléchargement de fichiers:

$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(); 
      }); 
      } 
     } 
    } 
} 

Alors, quelqu'un peut-il me aider à éviter ce problème et jeter l'alerte toaser seulement une fois que. Merci!

Answer 1

Depuis la section Javascript code sous https://github.com/danialfarid/ng-file-upload/blob/master/README.md#-usage, vous pouvez voir que le TROISIe rappel dans le bloc Upload.upload().then(...) est utilisé pour mettre à jour la jauge de progression. Ce n'est pas garanti de courir une seule fois.

Vous devriez plutôt essayer de mettre votre code grille-pain dans le premier rappel où vous avez actuellement $timeout(...) pour aider à isoler le problème.

Answer 2

Avez-vous poster le fichier inter-domaine? Si vous le faites, le navigateur fera deux fois la demande: la première fois est la demande OPTION, la seconde est la vraie demande POST.Cochez-le dans le réseau des devtools du navigateur Assurez-vous combien de demander au navigateur.