File Upload (asynchronous & multiple)

Antes del HTML5 uno veía plugins como uploadify para subir archivos y de entrada te sorprendías, después analizabas el código y te dabas cuenta que la magia era posible gracias al plugin de Flash o al de Silverlight que te permitían seleccionar múltiples archivos, ahora con la llegada de HTML5 el reto de eliminar todos los plugins sigue su curso.

Para empezar ahora tenemos File API, la cual nos permite tener mayor control sobre la interacción con archivos de lado del cliente, a eso le agregamos que el control input (type=file) ahora soporta el atributo multiple lo que ya habilita la opción de seleccionar muchos archivos con el mismo control… Creo que no hay mucho que decir así que si les aburre la teoría aquí está un ejemplo práctico…

Necesitaremos un control file y una lista donde desplegar nuestros archivos a cargar:

<!-- "multiple" - Con esto ya tenemos habilitada la selección de múltiples archivos -->
<input id="files" type="file" multiple="multiple" />
<ul id="file-list"></ul>

En cuanto el uso del API hay que validar que el navegador soporte esta funcionalidad, esto se logra validando lo siguiente:

var loadable = window.File && window.FileReader && window.FileList && window.Blob;

Si todo existe podemos explotar al máximo el API.

Crearemos ahora la carga asíncrona de los archivos, para eso cuando cambie nuestra selección de archivos mandaremos llamar una función como esta:

function uploadFile(file) {

    xhr = new XMLHttpRequest();

    // Actualizamos progreso de carga
    xhr.upload.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
            // Código
        }
    }, false);

    // Actualizamos cuando se termine de cargar el archivo
    xhr.addEventListener("load", function (result, d) {
        // Código
    }, false);

    // Mandamos el archivo a nuestro controlador
    xhr.open("post", "Uploader.ashx", true);

    // Creamos un form con el archivo a enviar
    var fd = new FormData();
    fd.append("file", file);

    // Enviamos el archivo (de forma asíncrona)
    xhr.send(fd);

}

Todo es posible gracias a los siguientes elementos:

XMLHttpRequestNos permite crear un objeto para intercambiar datos con el servidor

FormDataNos permite crear un formulario dinámico para poder enviarlo

Del lado del servidor crearemos un manejador muy simple que permitirá procesar cada archivo y quedaría algo como:

public void ProcessRequest( HttpContext context ) {            

    foreach ( string key in context.Request.Files ) {
        HttpPostedFile file = context.Request.Files[ key ] as HttpPostedFile;
        if ( file.ContentLength == 0 )
            continue;

        FileInfo fileInfo = new FileInfo( file.FileName );
        //file.SaveAs( context.Server.MapPath( filePath + fileInfo.Name ) );
        context.Response.Write( "Archivo guardado correctamente" );
    }

}

Si se agrega un poco de estilo y algunos elementos nuevos como el tag progress se pueden lograr cosas muy interesantes. Pueden ver el demo propuesto desde aquí (por seguridad ningún archivo que se adjunte se guarda en el servidor únicamente se simula la carga y el envió al servidor)

Conclusión

HTML5 gana una estrella más en cuanto a la integración de herramientas para desarrollo sin el uso de plugins, si bien esto es relativamente nuevo creo que comenzaremos a ver controles más complejos y sobre todo libres de uso ya que hay muchas herramientas para comenzar a crear.

Comparte tus creaciones en este espacio.