Multiple File Upload: Ajax Tool Kit. Por fin!!

Subir múltiples archivos al servidor se convirtió en un tiempo un dolor de cabeza para mi, ya que no encontraba un método seguro, fácil y gratis (sobre todo gratis) de realizar esta implementación, siempre terminaba comprando algún servicio que un tercero ofrecía.
Afortunada mente todo esto ha cambiado ya que ajax toolkit para ASP.NET en su ultima actualizacion ha incluido un control llamado "AjaxFileUpload" que nos facilita el trabajo de subir los múltiples archivos al servidor.
Este nuevo control de la familia ToolKit nos ofrece una interfaz amigable y permite arrastar y soltar elementos dentro de este.
En un post anterior (Aquí) hablamos de como incluir Ajax en nuestros proyectos web y de las ventajas que este nos trae.
Algo interesante de este control es que funciona perfectamente tanto con HMTL5 como con HTML4, en HTML5 se mostrara un UploadProgress que indicara el progreso de la subida de los archivos ientras que en HTML4 solo mostrara una imagen indicando espera.



Para comenzar con la implementación de este control crearemos un proyecto web en ASP.NET, al cual le agregaremos un webform e incluiremos el Ajax Tool Kit (Recuerden agregar el ScriptManager):

Hemos agregado solo 2 elementos: Un ScripManager y un AjaxFileUpload.

El control tiene varias propiedades importantes:

ThrobberID - El ID de un control que se muestra mientras se carga el archivo. La imagen de throbber se muestra para los navegadores que no soportan la API de archivos HTML5.

ContextKeys - Un diccionario que se puede utilizar para pasar información al servidor cuando un archivo se cargará.

MaximumNumberOfFiles - Esta propiedad permite limitar el número de archivos que un usuario puede agregar a la cola de subida.

AllowedFileTypes - Esta propiedad le permite restringir los tipos de archivos que se pueden cargar. Puede asignar una lista delimitada por comas de extensiones de archivo para esta propiedad.

IsInFileUploadPostBack - Esta propiedad tiene el valor verdadero cuando una página se crea en respuesta a una devolución de datos asincrónica AjaxFileUpload.

OnClientUploadComplete - El nombre de una función de JavaScript ejecutado en el lado del cliente después de que un archivo se ha subido correctamente.

 OnClientUploadError - El nombre de una función de JavaScript ejecutado en el lado del cliente, si la carga del archivo fracasó.

Su evento mas importante (a mi parecer) es el "UploadComplete" que se dispara cada vez que se termina de subir un archivo. Luego de este se dispára el evento JavaScript (si lo definimos).

Para almacenar los archivos en el servidor tendremos que hacer uso de este metodo "UploadComplete" ya que este contiene toda la informacion necesaria de los archivos que se estan cargando:
El metodo se vera mas o menos asi:

   

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        AjaxFileUpload1.SaveAs(Server.MapPath("ArchivosSubidos/" + e.FileName));
    }

Como ya dije anteriormente este método se ejecutara cada vez que se termine de subir un archivo.
Las propiedades de los archivos se encuentran alamcenadas en la clase "AjaxControlToolkit.AjaxFileUploadEventArg" que se pasa por parámetro en el Evento, así que solo tendras que usar la variable e colocas un punto y tendrás a tu disposicion las propiedades de cada archivo:
e.FileName: Nombre del archivo con su extensión (Archivo.jpg).
e.FileSize: Devuelve un entero indicando el tamaño del archivo en bytes;
e.FileId: Devuelve un String con el id del archivo. Es un GUID.
e.ContentType: Devuelve un String indicando el tipo de archivo.

Aquí les dejo el código fuente con la implementación de estos códigos y algunos mas:
Descargar

Que lo disfruten y no olviden comentar: ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."