Issue in javscript code

[sofiene2024]

i have to add this script to show progressbar when the file is uploaded 

the issue is that the progressbar is to 100% and the file is still uploaded

how can i resolve this please

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   function uploadFile() {
    var fileInput = document.getElementById('file1');
    if (fileInput.files.length === 0) {
        console.error('No file selected');
        return;
    }
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php'); // Change 'upload.php' to your server endpoint
    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        document.getElementById('progress').style.width = percentComplete + '%';
    };
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('File uploaded successfully');
            // Hide upload form and progress bar, show template
           
        } else {
            console.error('File upload failed');
        }
    };
    xhr.send(formData);
}
</script>