I have a form to upload a file. In this form, I have a button. When the user click on the button, my code converts the file while shows a progress bar that when hits 100% show a success message in the screen. It works just fine for the first time that I upload the file. However, when I tried to convert another file, my code does not show the progress bar and neither the message. Is there a way to reset the progress bar and message in order to get the progress bar and the message every time that I file is converted by the user?
I have in JS a function called move(). I call this function in my convert file button.
I tried to use setTimeout for doing that, but I am not able to fix it. Please, I appreciate any help.
function move() {
var elem = document.getElementById("myBar");
width = 1;
var id = setInterval(frame, 5); //makes slow
var timeout=3000;
function frame() {
if (width >= 100) {
clearInterval(id); //stop the bar
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
if(width>=100){
document.getElementById("status-message").innerHTML = "Sucessfully download the file.";
setTimeout(function(){
document.getElementById("status-message").innerHTML = 'none';
document.getElementById("myProgress").innerHTML = 'none';
}, timeout);
}
}
}
}