I will provide a detailed explanation of my issue.
- IMPORTANT-1: This issue arises with large files and under slow upload speed network conditions.
- IMPORTANT-2: The progress bar functions correctly in browsers like Edge.
- IMPORTANT-3: The problem only manifests in the Chrome browser.
I am currently developing a file uploader using XHR. Overall, the functionality works well, files are uploaded, etc.
I have implemented a progress bar that functions properly, but only the first time it is used (or after performing CTRL+SHIFT+R to clear cache). Despite enabling cache clearing in developer mode during testing, the progress bar fails to work on subsequent page refreshes.
Although the 'load' event is triggered (indicating file upload completion), the progress event does not fire after the initial run in Chrome.
Upon testing the code, everything functions as expected in the Edge browser. I can refresh the page and the progress event is triggered correctly, unlike in Chrome.
After reviewing articles suggesting that the 'content-length' header must exist and be greater than zero (which it does), I remain unsure of the issue.
Below is the script concerning the upload process:
let uploadFile = () => {
//... Other code
console.log("Upload started")
let xhr = new XMLHttpRequest();
let formData = new FormData();
formData.append('file', file);
xhr.open("POST", "uploaderServerside.php");
xhr.upload.addEventListener('progress', function(evt){
console.log("Uploading: " + (Math.round(evt.loaded / evt.total * 100)) + "%");
}, false);
xhr.addEventListener("load", () => {
console.log("Upload finished")
});
xhr.send(formData);
}
I hope for assistance in resolving this issue. Thank you for your time and consideration.