CODEWITHSUNDEEP
javascript
m-ketan
m-ketan

Reputation: 1308

setInterval() fires only once

I'm trying to update a variable every 500ms when an image upload starts and sets its value as 100 when the uploading completes. Here's the code:

var progress = 0
var $new = document.querySelector('#new');
var $imgupload = document.querySelector('#img-upload');
var $progress = document.querySelector('#progress');
var $percent = document.querySelector('#percent');
var interval = null;

function incrementProgress() {
    interval = window.setInterval(function() {
        $percent.innerHTML = progress+'%'
        $progress.setAttribute('value', progress)
        progress += 2;
        console.log('fired') // fires only once
    }, 500)
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var $img = document.querySelector('#new');
            $img.setAttribute('src', e.target.result);
            $img.style.display = 'block';
        }

        reader.readAsDataURL(input.files[0]);
    }
}

//triggers the setInterval() and initiates image uploading

$imgupload.addEventListener('change', function() {
    incrementProgress();
    readURL(this);
});


//clears the setInterval() on image upload and sets the progress value as 100.

$new.addEventListener('load', function() {
    window.clearInterval(interval);
    $percent.innerHTML = 100+'%'
    $progress.setAttribute('value', 100)
})

The Problem:

As soon as the image uploading starts, the value of $progress gets set to 0 and jumps directly to 100 once the image gets uploaded. What's expected is that the $progess variable increments by 2 every 500ms which is not happening.

Edit:

Here's the working fiddle:

https://jsfiddle.net/7tmcu5g6/1/

Upvotes: 0

Views: 95

Answers (1)

Lece
Lece

Reputation: 2377

Perhaps true progression would be better? Simply replace setInterval with reader.onprogress:

var $new = document.querySelector('#new');
var $imgupload = document.querySelector('#img-upload');
var $progress = document.querySelector('#progress');
var $percent = document.querySelector('#percent');

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onprogress = function (e) {
            var progress = Math.round((e.loaded / e.total) * 100);
            $percent.innerHTML = progress + "%";
            $progress.setAttribute('value', progress);
        }

        reader.onload = function (e) {
            var $img = document.querySelector('#new');
            $img.setAttribute('src', e.target.result);
            $img.style.display = 'block';
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$imgupload.addEventListener('change', function () {     
    readURL(this);
});

$new.addEventListener('load', function () {
    $percent.innerHTML = 100 + '%'
    $progress.setAttribute('value', 100)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<progress max="100" value="0" id="progress"></progress>
<span id="percent">0%</span>
<label for="img-upload">Upload</label>
<input type="file" accept=".jpg, .jpeg, .png" id="img-upload">
<img src='#' id='new' width="200" height="200" style="display: none">

Upvotes: 1

Related Questions