Making progress bar update correctly with javascript

Question

I have written an upload script in php which handles the upload html form on the website I am building. I have added a progress bar so that when the user submits the form they can see how far along the file upload is- but I can't work out how to make the upload bar animate according to how much of the file has been uploaded. At the moment when the upload button is clicked the animation just jumps quickly to 100%. I am very new at this so I apologise for my ignorance. The usual place I go to try to learn, w3schools, seems ambiguous on how to tie the file upload progress to the animation. Here is my code:

function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
  margin: auto;
  text-align: center;
}

}

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
  margin: auto;
}

<link href="http://fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css" >  

<div id="header-wrapper">
  <div class="container" id="header">
    <div id="logo">
      <h1><a href="#">Fix Audio</a></h1>
    </div>
  </div>
  <div class="container" id="banner">
  <div class="heading">
  <h2>A fresh approach to automated audio post production</h2>

  <p>In life there are no retakes. Most of your precious memories are captured on the fly with a mobile phone using a low quality inbuilt microphone. The cost of using traditional audio professionals and their expensive sound suites to improve audio quality has always been prohibitive. Until now.</p>
</div>
</div>
</div>

<div class="container" id="three-column">
  <div id="tbox1">
    <div class="title">
      <h2>Machine Learning</h2>
    </div>

    <p>Fix Audio uses cutting edge recognition and measurement algorithms to &quot;listen&quot; like a human would.</p>
  </div>

  <div id="tbox2">
    <div class="title">
      <h2>Human Experience</h2>
    </div>

    <p>Fix Audio draws on the experience of its human creators, who have worked at the top of the audio post production field for decades.</p>
  </div>

  <div id="tbox3">
    <div class="title">
      <h2>Simulated Processes</h2>
    </div>

    <p>Fix Audio follows decision making flows based on quantifying and emulating what a human audio engineer would do in the same situation.</p>
  </div>
</div>

<div id="wrapper3">
  <div class="container" id="portfolio">
    <div class="title">
      <h2>Hear the difference</h2>
      <span class="byline">Before and afters showcasing Fix Audio in action</span>
    </div>

    <div class="column1">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/uMrUy5WUKNQ" width="280"></iframe>
      <h3>Missing channel / Too soft</h3>
      <p>Fix Audio detects these issues and intelligently compensates for them.</p>
    </div>
  </div>

  <div class="column2">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/mBCbZ7tlVMA" width="280"></iframe>
      <h3>Digital distortion</h3>
      <p>Fix Audio &quot;redraws&quot; squared off waveforms to make distorted audio listenable again.       </p>
    </div>
  </div>    
  <div class="column3">
    <div class="box">
      <a href="#">
        <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/15EpKgotL5M" width="280"></iframe>
      </a>
      <h3>What did you say?</h3>    
      <p>Fix Audio fights wind noise and muddiness to make dialogue intelligable again.</p>
    </div>
  </div>

  <div class="column4">
    <div class="box">
      <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="157" src="https://www.youtube.com/embed/0NOdSS12C28" width="280"></iframe>
      <h3>Restore vintage content</h3>
      <p>Fix Audio revitalises old memories. You may hear things previously &quot;lost in time&quot;.         </p>
    </div>
  </div>
</div>
</div>

<div id="wrapper2">
  <div class="container" id="welcome">
    <div class="title">
    <h2>Now try it for yourself</h2>
</div>
<p>Fix audio was designed so that you can use it with absolute ease. Simply upload your audio or video content, enter your email address, and Fix Audio will work its magic. When it is finished, you will receive a private temporary download in your inbox to your professionally restored content.</p>
</div>
</div>
<div>
  <form action="upload.php" enctype="multipart/form-data" method="post">;
  <h2 style="color: gray; text-align: center;">Select file to upload 
  <div>
    <input id="fileToUpload" name="fileToUpload" type="file" /><br />
    <br />
  </div>    
</div>
</h2>    
<h2 style="color: gray; text-align: center;">Enter email address for return file<br />
  <input id="emailaddress" name="emailaddress" type="text" /><br /><br />
    <div id="Progress_Status">
      <div id="myprogressBar">0%</div>
    </div>
  <br>
  <button onclick="update()">Start Upload</button> 
</h2>
</form>

<div class="container" id="newsletter">
  <div class="title">
    <h2>Newsletter Signup</h2>
    <span class="byline">Stay in touch to receive the latest news on Fix Audio</span>
  </div>
  <div class="content">
  <form action="#" method="post">
  <div class="row half">
    <div class="6u">
      <input class="text" name="name" placeholder="Name" type="text" />
    </div>
    <div class="6u">
      <input class="text" name="email" placeholder="Email" type="text" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" placeholder="Message"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="12u">
      <a class="button" href="#">Send Message</a>
    </div>
  </div>
  </form>
</div>
</div>
</div>

<div id="wrapper4">
  <div class="container" id="footer">
    <div>
      <header class="title">
        <h2>Get in touch</h2>
        <span class="byline">Follow us on socials to keep up to date with all our latest</span>
      </header>
      <ul class="contact">
        <li><a class="icon icon-twitter" href="#"><span>Twitter</span></a></li>
        <li></li>
        <li><a class="icon icon-dribbble" href="#"><span>Pinterest</span></a></li>
        <li><a class="icon icon-tumblr" href="#"><span>Google+</span></a></li>
        <li><a class="icon icon-rss" href="#"><span>Pinterest</span></a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container" id="copyright">
  <p>&copy; Fix Audio. All rights reserved. Design by 
    <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.
  </p>
</div>

Would you be so kind as to create a reproducible fiddle of your problem? The extension of the code you provided makes it hard for people to help. Hard for me at least. — AmmoPT
– AmmoPT, Commented Sep 4, 2018 at 11:29
Please read How to Ask and then modify the question to include a minimal reproducible example As it stands you've just copied and pasted your whole page and asked us to fix it. Read the links - they'll help you ask a good question. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 4, 2018 at 11:33
Your update() function isn't checking progress at all. It's incrementing the width of the #progressBar div by 1% every 10 milliseconds until the bar is full. I'd also suggest against using w3schools as a learning resource. MDN is much better. — deefour
– deefour, Commented Sep 4, 2018 at 11:34
Also, use some kind of HTML validator, once your code have a lot of tags that open and never close and a lot of tags that close on the wrong place. freeformatter.com/html-validator.html — Calvin Nunes
– Calvin Nunes, Commented Sep 4, 2018 at 11:40

evgeni fotia · Accepted Answer · 2018-09-04 14:06:44Z

2

use XMLHttpRequest if you want the real progress

this is how (wrappe this code with an Event Listener of the form submit)

    var XHR = new XMLHttpRequest();
    var formData = new FormData();
    var file = document.getElementById("fileToUpload").files[0]
    formData.append("file", file);
    // do the same for any other input like this formData.append(inputName, inputValue);

    XHR.upload.onprogress = (e)=> {
        var uploadedData = e.loaded;
        var barLength = uploadedData*100/file.size
       /* barLength between 0% and 100%
        if you want it in px change 100 to the progress bar parentElement width in px */              
    }

    XHR.open("POST", "/yourFormActionURL");

    XHR.send(formData);

edited Sep 4, 2018 at 14:06

answered Sep 4, 2018 at 12:10

evgeni fotia

4,8003 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yotke · Accepted Answer · 2018-09-04 12:00:15Z

0

You have an extra } inside style tag. That breaks your css, and thats why you can't see results.

Besides that, everything is working but I took liberty to adjust css so that the bar actually starts from the left with absolute positioning. And starting width is 0 in css.

I made a fiddle with my example: https://jsfiddle.net/0escqr2w/20/

Notice that if someone clicks the button more then once before the first reaches 100%, your update function will create multiple intervals.

Suggested solution: disable the button after the first click.

edited Sep 4, 2018 at 12:00

answered Sep 4, 2018 at 11:46

yotke

1,2082 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Making progress bar update correctly with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related