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);

}

I have to add progressbar to kleeja upload script I have a three inputs wich contain the files to upload this is the css code for progressbar

#progress-bar {
width: 100%;
background-color: #f3f3f3;
}
#progress {
width: 0%;
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
}

and this is the javascript code

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

const file = fileInput.files\[0\];
const file2 = fileInput2.files\[1\];


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,file2', file);
xhr.send(formData);

}

i save this file in folder 'progressbar' this is the form to submit for uploading

                *                           [vars\['lang'\]\['DOWNLOAD\_F'\] ?? '{lang.DOWNLOAD\_F}'?>](#fileUpload)
                    
            

        

        

            vars\['config'\]\['safe\_code'\]){ ?>

vars['lang']['VERTY_CODE'] ?? '{lang.VERTY_