I have a working file upload form that uses XMLHttpRequest 2 to upload files to Transloadit (a file processing service). The progress events get fired correctly in Firefox and Chrome, both for Desktop and for Android. But the Android (4.0) stock browser does not fire these events, thus my progress bar doesn't work for those users of my site. XHR2 and ProgressEvent are supposedly supported in Android since 3.0, so I don't know what's going on.
The code is:
<!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>
