👀 Views: 65 💬 Answers: 1 📅 Created: 2025-08-20

html progress firefox javascript JavaScript

I've looked through the documentation and I'm still confused about I've been researching this but I'm working on an HTML5 application where I need to show the progress of a file upload using the `<progress>` element. The scenario I'm working with is that the progress bar does not update visually in Firefox when the progress value changes dynamically. I am using the following code to handle the progress updates: ```html <progress id="uploadProgress" value="0" max="100"></progress> <input type="file" id="fileInput" /> <button id="uploadButton">Upload</button> ``` ```javascript const uploadButton = document.getElementById('uploadButton'); const progressBar = document.getElementById('uploadProgress'); uploadButton.addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (file) { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.upload.addEventListener('progress', (event) => { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; progressBar.value = percentComplete; } }); xhr.send(new FormData().append('file', file)); } }); ``` The progress updates work perfectly in Chrome and Edge, but in Firefox, the progress bar remains exploring at 0% and does not visually update. I’ve also checked the console for any potential errors but did not find anything unusual. I am using Firefox version 117.0 on macOS. Has anyone experienced a similar scenario with the `<progress>` element, or is there something specific to Firefox that I might be missing in my implementation? This is for a microservice running on Ubuntu 22.04. Could this be a known issue? I'm on macOS using the latest version of Javascript.