Upload de archivos con barra de progreso usando XMLHttpRequest y la nueva API de HTML5
Posted on Febrero 15th, 2010 in AJAX, Desarrollo Web, Javascript | 3 Comments »
Creo que para muchos ha sido un desafío implementar un upload de archivos con barra de progreso ya que se debía enviar el formulario a un iframe oculto y mientras tanto revisar el progreso haciendo peticiones AJAX en pequeños intervalos. A esto había que sumarle todo el proceso del lado del servidor para calcular el porcentaje, y no todos los lenguajes nos proveen esa información.
Si bien la posibilidad de leer archivos ya existía en Firefox 3, combinado con las nuevas características de la última versión de este navegador, se pueden implementar funcionalidades mas avanzadas.
Con la nueva API podemos leer archivos del lado del cliente y de este modo enviar el contenido binario mediante una petición usando el nuevo método sendAsBinary() del objeto XMLHttpRequest.
Para acceder a los archivos, tenemos la propiedad files disponible en los elementos input de tipo file y ademas en el objeto DataTransfer (accesible en las operaciones de drag & drop). Esta propiedad es un objeto de tipo FileList que representa una colección de objetos de tipo File. Un objeto File dispone de propiedades que proveen información básica del archivo, como el nombre, el tipo y el tamaño.
Gecko 1.9.2 imlementa el objeto FileReader, el cual nos permite leer archivos en forma asincrónica y asi evitar que el navegador no responda durante la operación de lectura.
Si bien tenemos la posibilidad de enviar el contenido de un archivo como binario, para enviar múltiples archivos debemos generar el POST tal cual lo haría un formulario con el atributo enctype="multipart/form-data".
Pueden ver en acción un ejemplo muy sencillo – basado en jQuery – que permite seleccionar multiples archivos y enviarlos en una sola petición. Se puede ver el progreso mediante una barra. Del lado del server, con PHP hago un print_r() con el contenido de la variable $_FILES. Lo pueden ver con el Firebug.
Veamos paso a paso el código Javascript del ejemplo.
upload = [];
j(function() {
j('#upload-progressbar').progressbar();
j('#files').bind('change', function(e) {
var files = e.target.files;
var fileCount = 0;
j.each(files, function(k, v) {
fileCount++;
reader = new FileReader();
reader.onloadend = function(e) {
upload.push({
name : v.name,
type : v.type || 'text/plain',
bin : e.target.result // el contenido del archivo
});
if (upload.length == fileCount) uploadFiles();
};
reader.readAsBinaryString(v);
});
});
});
Al cargar la página, agregamos el evento change para el input. Cuando el usuario selecciona los archivos, iteramos por cada uno de ellos y leemos su contenido usando el metodo readAsBinaryString() del objeto FileReader. Al ser asincrónico, debemos utilizar el evento onloadend para detectar cuando terminó la operación. Dentro de esta función creamos un objeto con algunas propiedades del archivo y guardamos una referencia en un array global. Cuando detectamos que se han leído todos los archivos, procedemos a enviar el formulario:
function uploadFiles() {
var xhr = new XMLHttpRequest();
j('#upload-progressbar').show();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var perc = Math.round((e.loaded * 100) / e.total);
j('#upload-progressbar').progressbar('value', perc);
}
}, false);
xhr.upload.addEventListener('load', function(e) {
j('#upload-progressbar').progressbar('value', 100);
}, false);
xhr.open("POST", '/es/demos/ajax-upload');
var BOUNDARY = '---------------------------1966284435497298061834782736';
var rn = "\r\n";
var req = '';
j.each(upload, function(k, v) {
req += "--" + BOUNDARY + rn + "Content-Disposition: form-data; name=\"files[]\"";
req += '; filename="' + v.name + '"' + rn + 'Content-type: ' + v.type;
req += rn + rn + v.bin + rn;
});
req += "--" + BOUNDARY + '--';
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
xhr.sendAsBinary(req);
}
Creamos un objeto XMLHttpRequest. Aquí vemos que xhr.upload hace referencia a un objeto que contiene información sobre el proceso de upload y nos ofrece algunos eventos útiles. Abrimos una conección para enviar el formulario por POST y luego generamos el contenido binario que recibiremos en el servidor. Debemos establecer que el Content-Type es de tipo multipart/form-data, y como indica el nombre, quiere decir que la petición esta formada por múltiples partes. Para separarlas se utiliza una cadena que no aparezca dentro del contenido de los archivos (si estan aburridos pueden leer mas detalles aquí). En este caso es la variable BOUNDARY. Finalmente, la magia ocurre en el método sendAsBinary(). Pueden ver mas detalladamente el contenido del POST con el Firebug.
Esta técnica nos permite, por ejemplo, hacer una vista previa de las imágenes en el cliente o redimensionarlas antes de subirlas.
Quizas piensen en la seguridad como yo e intenten hacer esto:
j('#files').val('/etc/passwd');
Pero desgraciadamente afortunadamente nos encontramos con un error de seguridad 
No he investigado mucho en cuanto a compatibilidad en distintos navegadores. Si alguien tiene información al respecto es bienvenida.
UPDATE: El comportamiento en Firefox 3.6.2 sobre Ubuntu es algo inestable. A veces envía la petición pero se queda esperando una respuesta indefinidamente, y al seleccionar varios archivos se cierra el navegador de forma inesperada.
