Soundharya AM Soundharya AM - 2 years ago 74
Javascript Question

Progress bar is not working properly

I am trying to create the progress bar for uploading files into AWS services(lambda, S3) with Javascript and front-end is being done with materializecss. But, the progress bar moves too fast and before uploading it reaches the end and I can see the percentage of uploading the file with innerHTML. So, I'm sure it's being uploading.Below is the code which I have tried:

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

This code makes a little more sense

request.on('httpUploadProgress', function(progress) {
    var element = document.getElementById("progressdisplay");
    var percentage = (progress.loaded * 100) / progress.total + "%";
    element.innerHTML = percentage;
    progressdisplay.style.width = percentage;
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download