No hay progreso de XMLHttpRequest 2 en el browser de valores de Android

Tengo un formulario de carga de files que utiliza XMLHttpRequest 2 para cargar files a Transloadit (un service de procesamiento de files). Los events de progreso se activan correctamente en Firefox y Chrome, tanto para escritorio como para Android. Pero el browser de valores de Android (4.0) no activa estos events, por lo tanto, mi barra de progreso no funciona para los usuarios de mi sitio. XHR2 y ProgressEvent son supuestamente compatibles con Android desde 3.0, por lo que no sé lo que está pasando.

El código es:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Upload test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href="/assets/application.css" media="all" rel="stylesheet" type="text/css" /> <!-- twitter bootstrap --> <script type="text/javascript"> var onprogress = function(e) { var $status = $('.status'); $status.text('onprogress: ' + (e.loaded / e.total) * 75 + '<br>'); if (e.lengthComputable) { setProgress((e.loaded / e.total) * 75); } } var setProgress = function(percent) { percent = percent+'%'; var $progressBar = $('.progress .bar'); var $status = $('.status'); $progressBar.css('width', percent); $progressBar.text(percent); $status.text(percent); }; var createAttachment = function(file) { var params = {"blocking": true,"auth":{"key":"XXX"},"template_id":"XXX"} var xhr = new XMLHttpRequest(); var data = new FormData(); data.append('params', JSON.stringify(params)); data.append('attachment[file]', file); var evtReceiver = xhr.upload || xhr; evtReceiver.addEventListener('progress', onprogress, false); xhr.onload = function(e) { var resp = JSON.parse(e.target.response) $('.image').append($('<img src="' + resp.results['android-thumb'][0].url + '">')) setProgress(100); }; xhr.open('POST', 'http://api2.transloadit.com/assemblies', true); xhr.send(data); }; $(document).ready(function() { $('input[type=file]').on('change', function(event) { createAttachment(event.target.files[0]); }); }); </script> </head> <body> <input type="file" name="my_file"> <div class="progress progress-striped active"> <div class="bar" style="width: 0;"></div> </div> <div class="status"></div> <div class="image"></div> </body> </html> 

El evento de progreso es compatible con la versión Chromium del browser Android:

Android 4.4 (API de nivel 19) presenta una nueva versión de WebView basada en Chromium. Este cambio mejora el performance de WebView y el soporte de estándares para HTML5, CSS3 y JavaScript para que coincida con los últimos browseres web. Todas las aplicaciones que usan WebView henetworkingarán estas actualizaciones cuando se ejecuten en Android 4.4 y versiones posteriores.

Actualice a 4.4 para usar esta API.

Referencias

  • Migrando a WebView en Android 4.4 | Desarrolladores de Android