Téléchargement de fichier avec barre de progression dans Angular JS

Question

Y at-il quelqu'un qui peut m'aider à mettre une barre de progression pendant que je télécharge un fichier pour indiquer à l'utilisateur que le fichier est encore en train de télécharger? Désolé je suis encore nouveau concernant celui-ci. Je lis beaucoup à ce sujet et je me sens encore confus. Merci d'avance!

Voici mon html où je soumettrai le fichier:

 <form class="form-group" ng-submit="addX()"> 
     <div class="col-lg-4"> 
      <input id="file" type="file" name="file" class="file btn btn-default" data-show-preview="false"><br> 
      <input id="submit" class="btn btn-primary" type="submit" name="submit" value="Upload" /><br/><br/> 
     </div> 
    </form> 

Et voici mon js qui me connecter à mon fichier python:

$scope.addX = function() { 
     var f = document.getElementById('file').files[0]; console.log(f); 
     var formData = new FormData(); 
     formData.append('file', f); console.log(formData); 
      $http({method: 'POST', url: 'http://x.x.x./', 
          data: formData, 
          headers: {'Content-Type': undefined}, 
          transformRequest: angular.identity}) 
        .success(function(data, status, headers, config) { 
          if (data.success) { 

           console.log('import success!'); 

          } 
         }) 
         .error(function(data, status, headers, config) { 
         }); 
       // } 
      }; 

Answer 1

Malheureusement, cela ne semble pas possible le moment. Vous pouvez suivre ce thread https://github.com/angular/angular.js/issues/1934 qui appelle l'accès à la requête xhr dont vous auriez également besoin pour la mise à jour de la progression. Pour l'instant, vous devez utiliser l'objet XHR2 vous-même. Quelque chose comme ça

var fd = new FormData(); 
fd.append("uploadedFile", file); 

xhr = new XMLHttpRequest(); 

xhr.upload.addEventListener("progress", uploadProgress, false); 

xhr.addEventListener("readystatechange", function (e) { 
// upload completed 
if (this.readyState === 4) { 

// do whats needed 
} 

xhr = null; 
} 
}); 

xhr.addEventListener("error", function (e) { 
callback(e); 
}); 
//xhr.addEventListener("abort", uploadCanceled, false); 
xhr.open("POST", url); 

// send the form data to the server 
xhr.send(fd); 

Une autre option pour contourner ce serait de le manipuler côté serveur dans le cas où vous avez le contrôle sur le service.