FileUpload AjaxControlToolkit

Posted on Actualizado enn


En el artículo anterior (míralo acá) vimos como utilizar el FileUpload que ofrece ASP.NET,  y como poder realizar validación tanto en el cliente como en el servidor, sin embargo este control no funciona cuando tenemos un UpdatePanel, o no totalmente, en tal caso el FileUpload debería estar asociado a un trigger del UpdatePanel.

Para solucionar el problema anterior podemos utilizar el control AsyncFileUpload disponible en el AjaxControlToolkit. Veamos las ventajas y desventajas de este control:

Ventajas:

  1. Funciona en conjunto con el UpdatePanel.
  2. Funciona de manera asíncrona.
  3. Permite establecer un icono para indicar que se esta realizando el cargue.
  4. Control de eventos en el cliente y en el servidor

Desventajas:

  1. No funciona con Internet Explorer 9: En este punto tuve que activar la vista de compatibilidad.
  2. Una vez iniciada la subida del archivo no es posible cancelarla.
  3. Una vez utilizado el control, no es posible limpiar el contenido del mismo.
  4. No es posible saber el progreso de carga del archivo.
  5. La subida del archivo inicia una vez se seleccione el archivo.este se ha seleccionado.
  6. No es posible manejar múltiples archivos.

En relación a las ventajas y desventajas de este control, en mi opinión muy personal todavía es un control que no utilizaría en una aplicación de gran impacto, pero bueno vamos a ver como es que funciona:

Código HTML del control:

<cc1:AsyncFileUpload ID="AjaxUpload" runat="server" UploaderStyle="Modern" Width="350px"
     ThrobberID="imgLoading" OnClientUploadComplete="UploadComplete"
     OnClientUploadError="UploadError"  />
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/ajax-loader.gif" />

Los atributos importante de este control son:

  1. UploaderStyle: Permite seleccionar dos estilos, Modern que muestra el control de selección con un estilo más bonito además de tener una imagen, y el estilo Traditional, el cual solo muestra el botón de selección con un texto que indica selección de archivo.
  2. ThrobberID: El id de la imagen que se mostrará cuando se este cargando el archivo.
  3. OnClientUploadComplete: Función JavaScript que se ejecuta una vez se ha realizado satisfactoriamente el cargue del archivo.
  4. OnClientUploadError: Función JavaScript que se ejecuta si se produce algún error al subir el archivo.

Funciones JavaScript:

function UploadComplete(sender, args) {
   var filename = args.get_fileName();
   var contentType = args.get_contentType();
   var text = "Nombre archivo: " + filename + ". Tamaño: " + args.get_length() + " bytes";
   document.getElementById('lblMensaje').innerText = text;
}
function UploadError(sender, args) {
   var text = "No se ha podio subir el archivo. " + args.get_errorMessage();
   document.getElementById('lblMensaje').innerText = text;
}

Con la función UploadComplete, mostramos el un label el nombre y el tamaño del archivo, mientras que con
la función UploadError informamos el error producido.

Funciones Servidor:

  1. UploadedComplete: Se ejecuta cuando el archivo se carga con éxito.
  2. UploadedFileError: Se lanza cuando el archivo esta corrupto.

Para realizar el guardado se dispone del método SaveAs el cual vimos en el artículo anterior.

En el próximo artículo vamos a revisar como implementar un FileUpload con jQuery.

Les dejo el código en VB como en C# del ejemplo:

Ejemplo en VB !

Ejemplo en C# !

6 comentarios sobre “FileUpload AjaxControlToolkit

    […] Todo en Visual Basic.Net InicioAcerca de « FileUpload AjaxControlToolkit […]

    dev escribió:
    07/28/2013 en 19:35

    Las funcionalidad “No se puede…” hacen que no sea muy practico su uso en aplicaciones reales… Y que no funcione en IE8, IE7 como debe ser es un gran problema…

    Ya estamos en Julio 2013, probado infinidad de técnicas, pero ninguna es completa y no se puede aplicar a un aplicación real con UpdatePanel… También he intentado solucionarlas pero Nada… Y tampoco he encontrado una solución efectiva a las deficiencias que presenta este control, en una de la funciones más básicas para una aplicación web…

    Saludos…

      Julio Avellaneda respondido:
      07/31/2013 en 10:05

      Hola gracias por comentar, bueno realmente el control si tiene algunos puntos en contra, claro que también puedes usar controles de terceros más completos, de todas maneras lo que yo veo es que el problema de raiz se da por usar el updatepanel, la verdad no me gusta, y prefiero siempre utilizar soluciones más cliente, y que no tengan problemas de compatibilidad entre navegadores… saludos!

    DIEGO escribió:
    10/09/2013 en 12:42

    Disculpa, trato de usar fileupload para cargar un archivo de dbf pero al momento de quererlo cargar me truena y me dice que fallo con el servidor !

    Moises escribió:
    12/02/2013 en 18:29

    pibe sos un groso… la verdad me pase buscando dias y dias una web decente que usara el ajax en c# o me diera un ejempo minimamente de como subir una imagen… la verdad me re salvaste mil gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s