Progressbar has a value of 100% before upload progress is finished

Red Kipling

I upload a files in my website I have this javascript code integrated to show the progress of upload But the issue is that this bar has value of 100% before the upload is completed How can i resolve this

function uploadFile() {
const fileInput = document.getElementById('file1');

const file = fileInput.files\[0\];



const xhr = new XMLHttpRequest();
xhr.open('POST', 'index.php', true);

xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) \* 100;
        const progress = document.getElementById('progress');
        progress.style.width = percentComplete + '%';
        progress.textContent = Math.round(percentComplete) + '%';
    }
};

xhr.onload = function () {
    if (xhr.status === 200) {
        alert('File uploaded successfully.');
    } else {
        alert('Error uploading file.');
    }
};

const formData = new FormData();
formData.append('file1', file);
xhr.send(formData);

}

Richard Andrew x64

My best guess is that event.loaded and event.total are integers, not floating point numbers as you expect, so it's performing integer math.

The difficult we do right away... ...the impossible takes slightly longer.

Richard Deeming

Except that JavaScript doesn't really have a concept of "integers", unless you use the BigInt class. :)

JavaScript language overview - JavaScript | MDN[^]:

Number: used for all number values (integer and floating point) except for very big integers. BigInt: used for arbitrarily large integers.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

jschell

Red Kipling wrote:

const percentComplete = (event.loaded / event.total) * 100;

You might try the following. Mathematically it is the same but the order of operations changes how it computes the result. const percentComplete = ((event.loaded * 100) / event.total);

Steve Raw

Red Kipling wrote:

upload a files in my website I have this javascript code integrated to show the progress of upload But the issue is that this bar has value of 100% before the upload is completed How can i resolve this

See what happens if you replace this code:

xhr.upload.onprogress = function (event) {
//code
};

...with this

xhr.upload.addEventListener("progress", function (event) {
//code
});

Although your code is correct, try using the addEventListener method to see if that makes any difference. I believe that event listeners need to be assigned before the xhr's "open" method is called.