I have a form on a Prestashop's website where users can upload files. Those files can be heavy sometimes so i needed a progress bar with a percentage displaying in real time.

I did it with the <progress> tag and the XMLHttpRequest object.

Everything's working fine on Chrome but nothing happens in Safari and Firefox.

Here's the javascript code :

function uploadFile(event){
        const xhr = new XMLHttpRequest()

        xhr.open(
            'POST',
            event.currentTarget.getAttribute('action')
        )

        xhr.upload.addEventListener(
            'progress',
            fillProgressBar
        )

        xhr.send(new FormData(event.currentTarget))
    }

    const progressElement = document.body.querySelector('progress')
    const progressInformation = document.body.querySelector('#progress_information')

    function fillProgressBar({lengthComputable, loaded, total}){
        const progression = lengthComputable ? ((loaded / total) * 100).toFixed(0) : 0
        progressInformation.textContent = progression
        progressElement.value = progression
        
    }

    const customForm = document.body.querySelector('#custom_form');

    customForm.addEventListener(
        'submit',
        uploadFile
    )

When i test a console.log('Hello') in :

xhr.upload.addEventListener(
    'progress',
    console.log('Hello')
    fillProgressBar
)

I can see it in the console, the problem is the function fillProgressBarwho just never fires.

I have searched a lot on the Internet in vain...

What can I do on this one fellas ?

Thanks for reading !