La barre de progression ne fonctionne pas correctement

Question

J'essaie de créer la barre de progression pour télécharger des fichiers dans les services AWS (lambda, S3) avec Javascript et le frontend est en cours avec materializecss. Mais, la barre de progression se déplace trop vite et avant que le téléchargement atteigne la fin et je peux voir le pourcentage de téléchargement du fichier avec innerHTML. Donc, je suis sûr que c'est d'être uploading.Below est le code que j'ai essayé:

<style> 
#progressdisplay { 
      width: 100%; 
      background-color: #229954; 
      border-radius: 4px; 
      text-align: center; 
      line-height: 12px; 
      color: white; 
     } 

     #myBar { 
      height: 12px; 
      background-color: grey; 
      border-radius: 4px; 
     } 
    </style> 

<div class="row"> 
     <div class="file-field input-field col s12"> 
      <div class="btn blue"> 
       <span>Course File</span> 
       <input id="crsfile" type="file"> 
      </div> 
      <div class="file-path-wrapper"> 
       <input class="file-path validate" type="text" placeholder="Select the file"> 
      </div> 
     </div> 
    </div> 

    <br/> 
    <div class="container" id="progressbar"> 
     <div id="myBar"> 
      <div id="progressdisplay"></div> 
     </div> 
    </div> 

    <br/> 

    <div class="container center"> 
     <button class="btn waves-effect waves-light blue" type="submit" name="action" onclick="combinedfunctions()">Send 
     <i class="material-icons right">send</i> 
     </button> 
    </div> 

<script> 
request.on('httpUploadProgress', function(progress) { 
       var percentage = document.getElementById("progressdisplay"); 
       percentage.innerHTML = (progress.loaded * 100)/progress.total + "%"; 
       //console.log(progress.loaded + " of " + progress.total + " bytes"); 
       function move() { 

        var width = 10; 
        var id = setInterval(frame, 10); 

        function frame() { 
         if (width >= 100) { 
          clearInterval(id); 
         } else { 
          width++; 
          this.$$("progressdisplay").style.width = percentage + '%'; 
          this.$$("progressdisplay").innerHTML = percentage * 1 + '%'; 
         } 
        } 
       } 
      }); 
</script> 

Answer 1

Ce code fait un peu plus de sens

request.on('httpUploadProgress', function(progress) { 
    var element = document.getElementById("progressdisplay"); 
    var percentage = (progress.loaded * 100)/progress.total + "%"; 
    element.innerHTML = percentage; 
    progressdisplay.style.width = percentage; 
});