Tengo un formulario en el sitio web de Prestashop donde los usuarios pueden cargar archivos. Esos archivos pueden ser pesados a veces, así que necesitaba una barra de progreso con un porcentaje que se mostrara en tiempo real.

Lo hice con la etiqueta <progress> y el objeto XMLHttpRequest.

Todo funciona bien en Chrome, pero no pasa nada en Safari y Firefox.

Aquí está el código javascript:

 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 )

Cuando pruebo un console.log('Hello') en:

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

Puedo verlo en la consola, el problema es la función fillProgressBar que simplemente nunca dispara.

He buscado mucho en Internet en vano...

¿Qué puedo hacer en este muchachos?

Gracias por leer !