Why is my XMLHttpRequest progress console log not showing?

Question

The progess of the file upload is not being console logged. Why?

Here is the code I have:

const xhr = new XMLHttpRequest();
    
xhr.open('POST', apiUrl);

xhr.upload.addEventListener("progress", function(e){
    console.log(e.loaded/e.total)      
})

xhr.onload = () => {
    const response = JSON.parse(xhr.response);
    console.log(response);
    // ... do something with the successful response
};
        
xhr.send(formData);

Answer 1

Your apiUrl response must have the HTTP response header Content-Length. If it doesn't, there is nothing to compute.

Maybe the event handler should be bound to xhr:

xhr.addEventListener("progress", function(e) {