XMLHttpRequest.upload.onprogress not Working with HTTPS

Issue

I have a page where users can upload files with the help of FormData and an XMLHttpRequest. Uploading the file works fine. But the upload.onprogress is only working when uploading from an HTTP connection.

HTTPS

HTTP

I've tested this on Heroku and on an Amazon EC2 instance. But it's always the same:

• Progress is shown when uploading via HTTP
• Progress event is never triggered when uploading via HTTPS

Javascript (Angular 7)

const xhr = new XMLHttpRequest();
let progress = 0;


/** THIS EVENT IS NOT WORKING WITH HTTPS */
xhr.upload.onprogress = (event: ProgressEvent) => {
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
    }
};


xhr.responseType = 'json';
xhr.open('POST', `${API_URL}/${this.API_PATH}/upload`, true);
xhr.setRequestHeader('authorization', this.authService.getAuthToken());
xhr.send(payload);
xhr.onload = () => {
    observer.next(xhr.response);
    observer.complete();
};

Node.Js

const busboyBodyParser = require('busboy-body-parser');
app.use(busboyBodyParser())

---

const busboy = new Busboy({ headers: req.headers })
busboy.on('finish', async () => {

    const fileData = req.files.file
    const fileId = req.body.fileId
    const params = {
        Body: fileData.data,
        Bucket: awsConfig.bucket,
        ContentType: fileData.mimetype,
        Key: fileId,
        StorageClass: 'ONEZONE_IA',
    }
    awsConfig.s3.upload(params, (err, data) => { /* ... */ }

})
req.pipe(busboy)

What I've also tried

I also tried to use the .addEventListener syntax for listening for progress:

xhr.upload.addEventListener("progress", uploadProgress, false);

But this didn't work, either.

Notes

Please note, that I have already asked a question about this topic. But I got no working answer and I really need this to work.

Old question: XHR upload onprogress Event not Working on HTTPS Connection

from XMLHttpRequest.upload.onprogress not Working with HTTPS