.NET del día a día

Subiendo archivos asíncrono en asp.net con el control “AsyncFileUpload”

2009-10-05T01:10:00Z

Recientemente se liberó una nueva versión del famoso “Ajax Control Toolkit”, adicional a los arreglos y estabilidad que exhibe el release, este incluye dos nuevos controles: SEADRAGON y ASYNCFILEUPLOAD de este ultimo dedicaré este post.

Para nadie es un secreto que uno de los dolores de cabeza de los desarrolladores que usan ASP.NET AJAX, específicamente los “UpdatePanels” es la limitación de poder incluir dentro de este, un control de “FileUpload” para la carga de archivos. En los buscadores y foros te daras cuenta que un gran numero de desarrolladores ha tenido que hacer implementaciones complejas, comprar control o desistir de hacer una carga de archivo asíncronas dentro del update panel. Para este problema los chicos del AJAX Control Toolkit desarrollaron el control “AsyncFileUpload” que es un control bien sencillo de implementar y además mantiene la características de los ya conocidos controles del toolkit.

Basicamente el control se define así:

<toolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
       OnClientUploadError="uploadError" 
       OnClientUploadComplete="uploadComplete" 
       UploaderStyle="Modern"  
       ThrobberID="Throbber" UploadingBackColor="#CCFFFF" 
       CompleteBackColor="Aqua" />

Este control está compuesto por los siguientes:

Eventos

UploadedComplete: evento que ocurre en el servidor cuando la cargar del archivo ha sido satisfactorio.
UploadedFileError: evento que ocurre en el servidor cuando la carga del archivo ha generado algún error.

Propiedades

CompleteBackColor: El color de fondo del control cuando la carga ha sido completada.
ContentType: Se obtiene el tipo de contenido (MIME Content Type) del archivo cargado.
ErrorBackColor: el color de fondo del control cuando la carga ha genrado un error.
Filename: se obtiene el nombre del archivo.
Hasfile: un boleano que indica si el control tiene archivo o no.
OnClientUploadError: el nombre de la funcion de Javascript que se ejecutará si falla la carga.
OnClientUploadComplete: el nombre de la funcion de Javascript que se ejecutará cuando se complete la carga.
PostedFile: se obtiene un objeto HttpPostedFile con acceso al archivo cargado.
ThrobberID: (debió ser ProgressImage) Es el ID del control que mostrará el progreso.
UploaderStyle: define la apariencia del control (Tradicional o Moderno).
UploadingBackColor: color de fondo del control cuando está cargando el archivo.
Width: define el largo del control.

Metodos

SaveAS(archivo as string): Guarda el archivo pasandole como parametro la ruta y el nombre del archivo.

En la implementación que anexo en este post el HTML se observa de esta forma:

<form id="form1" runat="server">
   <asp:ScriptManager ID="sm" runat="server" />
   <h1>
       Carga de archivo asíncrona</h1>
   <div id="demoTitle">
       Demostración Control "AsyncFileUpload"
   </div>
   <div id="uploadArea">
       <toolkit:AsyncFileUpload ID="AsyncFU" 
       runat="server" 
       OnClientUploadError="uploadError"
       OnClientUploadComplete="uploadComplete" 
       UploaderStyle="Modern" 
       ThrobberID="Throbber"
       UploadingBackColor="#CCFFFF" 
       CompleteBackColor="AliceBlue" />
       <div id="Throbber" runat="server" 
           style="display: none;">
           <img align="middle" alt="" src="indicator.gif" />
       </div>
   </div>
   <br />
   <br />
   <div>
       <strong>Ultimo evento del lado del servidor:</strong></div>
   <div id="msgServerSide" runat="server">
   </div>
   <br />
   <br />
   <div>
       <strong>Eventos del lado del cliente:</strong></div>
   <div id="msgClientSide" runat="server" style="display: none">
   </div>
   </form>

Estas funciones de javascript le permiten al control crear comportamientos y funcionalidades directamente en el cliente:

<script type="text/javascript">
        function uploadError(sender, args) {
            var divmsg = $get("<%= msgClientSide.ClientID %>");
            divmsg.className = "error";
            divmsg.style.display = 'block';
            divmsg.innerHTML = 'File: ' + args.get_fileName() +
            '<br/>' + 'Error: '
            + args.get_errorMessage();

        }
        function uploadComplete(sender, args) {
            var divmsg = $get("<%= msgClientSide.ClientID %>");
            divmsg.className = "success";
            divmsg.style.display = 'block';
            divmsg.innerHTML = 'File: ' + args.get_fileName() + '<br/>'
             + 'Length: ' + args.get_length() + 'bytes';
        }
        
    </script>

Del lado del cliente manejamos los eventos inyectando scripts a través del scriptmanager.

Protected Sub AsyncFU_UploadedComplete(ByVal sender As Object, _
              ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) _
              Handles AsyncFU.UploadedComplete

    Dim myScript = "top.$get('" & msgServerSide.ClientID & _
   "').innerHTML = 'Estatus: Satisfactorio <br/>  Archivo: " & e.filename & _
   "<br/> Tamaño: " & AsyncFU.FileBytes.Length.ToString() & "';"
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "size", myScript, True)

    'AsyncFU.SaveAs("AQUI VA LA RUTA PARA GRABAR EL ARCHIVO")

End Sub

Protected Sub AsyncFU_UploadedFileError(ByVal sender As Object, _
              ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) _
              Handles AsyncFU.UploadedFileError

    Dim myScript = "top.$get('" & msgServerSide.ClientID & _
    "').innerHTML = 'Error: " & e.statusMessage & "';"
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "error", myScript, True)

End Sub

Desde aquí puedes descargar el proyecto que utiliza el control.

Conclusiones

Pros:

Permite usar el control dentro de un Updatepanel.
Se pueden manejar funcionalidades del lado del cliente.
Soluciona en gran parte el problema de cargar de archivo asíncrono en asp.net.
Si ocurre un error la ruta del archivo seleccionado persiste en el control.
Permite tener acceso a diferente estado cuando se carga el archivo.

Contra:

No tiene la capacidad para múltiples archivo.
Por alguna razón cuando seleccionas el archivo la carga se hace automática.

Configurando SQL Server 2008 para enviar emails (paso a paso)

2009-09-17T00:53:00Z

Hoy en día la mayorías de las aplicaciones hacen uso de los servicios de Exchange o SMTP para enviar correos electrónicos a los usuarios, en muchas ocasiones el envío del correo lo hacemos a través de la aplicación misma pero existen escenarios en donde es preferible hacer el envío de correos desde nuestro repositorio de datos.

A continuación mostraré paso a paso como configurar el servicio de correos en SQL Server 2008, como asignar permisos a usuarios de base de datos para que utilicen el profile que hemos creado para el envío de correos.

Paso 1: Creación del “Profile” y el “Account”, en el “Managment Studio” click derecho sobre “Database Mail

Si es la primera vez que configura el servicio, entonces debes activarlo dando click en la opción “yes”

Paso 2: Enviar un Email, despues que la configuracion esta hecha existen dos formas de probar nuestro servicio, el primero es desde la ventana “Send Test Email” o ejecutando el procedure “sp_send_dbmail” veamos los ejemplos:

El envio desde T-SQL es:

EXEC msdb.dbo.sp_send_dbmail @profile_name='BlogProfile',
    @recipients= 'prueba@dominio.com',
    @subject= 'Mensaje de Prueba',
    @body= 'Este es el cuerpo del mensaje y escribo un texto de prueba.'

La lista completa de parametros que recibe este “Store Procedure” puedes conseguirlo desde aquí.

Paso 3: Asingación de Permisos, Sucede que esta configuración y la prueba ls hice con un usuario “sysadmin”, pero ni necesitamos que cualquier usuario en nuestra base de datos utilice este “Profile” para enviar email debemos de otorgarle el permiso ejecutando este script:

USE msdb
GO
EXEC sp_adduser @loginame='AQUI VA EL USERNAME', 
@grpname='DatabaseMailUserRole'
GO

El administrador de base de datos puede monitorear los mensajes enviados a traves de las siguientes vistas o tablas que estan en la base de datos “MSDB”

sysmail_allitems : verifica todos los items enviados.
sysmail_faileditems: los correos que han fallado.
sysmail_event_log: El log de eventos de los emails.
sysmail_mailattachments: la vista de los attachments.
entre otros.

** Puedes seguirme en twitter

Subiendo y tocando videos en ASP.NET

2009-09-08T18:41:00Z

Hace unos días un compañero me pidió que le ayudara a incluir la funcionalidad de cargar y ver video en un portal de venta de vehículo, los requerimientos eran los siguientes:

Permitir al usuario cargar al portal diferentes tipos de video, específicamente los más populares AVI, WMV, MPG, MP4.
Hacer encoding de los videos cargados para reducir su tamaño considerablemente a fin de que usuarios con poco ancho de banda puedan ver los videos.
Una vez cargado el video, permitir al usuario ver el video convertido.
El video cargado por el usuario no puede exceder los 50MB.
El típico requerimiento, que los componentes involucrados no alteren los costos del proyecto.

Haciendo una vista rápida de los requerimientos no parece difícil desarrollar este feature, pero la realidad es que aunque es muy popular ver video en los website no es tan fácil como parece. Primero porque hay pocos componentes gratuitos para estos fines, segundo la documentación para hacer esta tarea no es tan abundante en internet (por eso me anime a publicar este articulo) y tercero hacer el encoding en línea hace la tare un poco mas difícil.

Para desarrollar estos requerimientos utilicé las siguientes herramientas:

Visual Studio 2008 (tambien puedes usar Visual Web Developer 2008).
ASP.NET
FFmpeg (para hacer encoding de los videos) la documentación la puede encontrar Aquí
Flowplayer (para ver los videos convertidos a flv) la documentacion la puede encontrar Aquí

El “Website Project” creado contiene los directorios:

Player: contiene los archivos utilizados para visualizar un video.
Videos: almacena los videos, tanto el original cargado por el usuario, asi como tambien el convertido a flv.
ffmpeg.exe: el ejecutable utilizado para hacer el encoding a los videos.
Dos paginas que detallaremos a continuacion.

La primera página “UploadVideo.aspx” se encarga de permitirle al usuario cargar su propio video, esta se compone del HTML especificado más abajo.

<form id="form1" runat="server">
    <h1>
        Video Website - Upload Videos</h1>
    <div>
        <asp:FileUpload ID="videoFile" runat="server" />
        &nbsp;<asp:Button ID="btnUpload" runat="server" Text="Upload video" OnClick="btnUpload_Click" />
        <br />
    </div>
    <asp:Label ID="lblErrorVideo" runat="server" EnableViewState="False" CssClass="redbold"></asp:Label>
</form>

Si tiene experiencia cargando archivo desde ASP.NET sabrás que por defecto no se pueden cargar archivos que excedan los 4MB por lo que debemos de modificar el web.config de nuestro web.config, específicamente debajo del tag <system.web> de esta forma:

<system.web>
    <httpRuntime maxRequestLength="51200" />

El atributo “maxRequestLength” se especifica en KB.

Lo interesante de esta página ocurre en su code behind, observemos:

Variables globales utilzadas en el codigo (esto puede venir del web.config o del cualquier otra configuración).

    //Ruta en donde se van a guardar los videos.

    string videoOriginalPath = "~/Videos/Original/";

    string videoConvertedPath = "~/Videos/Converted/";

    //Variables utilizadas para manejar los nombres.

    string videoTmpName = string.Empty;

    string flv = ".flv";

    string videoConvertedName = string.Empty;

El código que ejecuta el evento Click del button Upload se encarga de validar la extensiones permitidas (línea 6), que el archivo no exceda los 50MB (línea 13) y en la línea 26 se hace el encoding y si todo resulta bien, entonces direccionamos a la página de visualización de videos.

   1:   protected void btnUpload_Click(object sender, EventArgs e)

   2:      {

   3:          HttpPostedFile file = videoFile.PostedFile;

4:

   5:          //Validamnos la extension del archivo

   6:          if (!ValidateVideoExtension(file.FileName))

   7:          {

   8:              lblErrorVideo.Text = "La extension del archivo no es permitido.";

   9:              return;

  10:          }

11:

  12:          //Verificamos el tamano del archivo de que no exceda los 50MB.

  13:          if (file.InputStream.Length > 52428800)

  14:          {

  15:              lblErrorVideo.Text = "El video no puede exceder los 50MB";

  16:              return;

  17:          }

18:

  19:          //Guardamos el video

  20:          string saveAs = Server.MapPath(videoOriginalPath);

  21:          videoTmpName = Guid.NewGuid().ToString();

  22:          string originalVideo = saveAs + videoTmpName + new FileInfo(file.FileName).Extension;

  23:          file.SaveAs(originalVideo);

24:

  25:          //Hacemos el Encondding del video

  26:          if (EncodingVideo(originalVideo)){

  27:              Response.Redirect("MyVideos.aspx?Id=" + videoConvertedName);

  28:          }

  29:          else {

  30:              lblErrorVideo.Text = "Error convirtiendo el video, intente nuevamente";

  31:          }

  32:      }

La funcion “ValidateVideoExtension” se límita a verificar la extensión del archivo cargado:

   1:   private bool ValidateVideoExtension(string filename)

   2:      {

   3:          FileInfo info = new FileInfo(filename);

   4:          switch (info.Extension.ToLower())

   5:          {

   6:              case ".mpg":

   7:              case ".wmv":

   8:              case ".avi":

   9:              case ".mp4":

  10:                  return true;

  11:              default:

  12:                  return false;

  13:          }

  14:      }

En la función “EncodingVideo” hacemos uso de la Clase “Process” bajo el namespace “System.Diagsnotics”, esta clase nos permite hacer ejecucion de procesos locales o remotos, en este caso la ejecución del ffmpeg.exe. En la línea 8 se específican los parametros utilizados para el encoding, la definicion de estos parámetros se encuentran en la documentación del ffmpeg, un metodo que es imprescindible para este proceso en linea es “encoding.WaitForExit()” el cual espera a que el proceso concluya. debajo el codigo de esta función.

   1:   private bool EncodingVideo(string originalVideo)

   2:      {

   3:          bool value = false;

   4:          string saveAs = Server.MapPath(videoConvertedPath);

   5:          videoConvertedName = videoTmpName + flv;

6:

   7:          //Parametros que se le pasaran al ejecutable para fines de encoding.

   8:          string args = @" -i " + originalVideo + " -b 200 -r 24 -s 320x240 -deinterlace -ab 64k " + saveAs + videoConvertedName;

9:

  10:          //Hacemos uso de la clase proxy la cual nos provee acceso directo al ejecutable.

  11:          using (Process enconding = new Process())

  12:          {

  13:              enconding.StartInfo.WorkingDirectory = Server.MapPath("~/");

  14:              enconding.StartInfo.FileName = Server.MapPath("ffmpeg.exe");

  15:              enconding.StartInfo.Arguments = args;

  16:              enconding.StartInfo.UseShellExecute = false;

  17:              enconding.StartInfo.CreateNoWindow = true;

  18:              enconding.StartInfo.RedirectStandardOutput = false;

  19:              enconding.Start();

  20:              //Como es un proceso en linea debemos esperar a que termine para mostrar el video sino el player dará un error de FileNotFound.

  21:              enconding.WaitForExit();

  22:              value = true;

  23:          }

24:

  25:          return value;

26:

  27:        }

Una vez concluido el proceso de “Encoding” tendremos en la carpeta /Videos/Converted/ el video flv, el cual mostraremos en la segunda página llamada “MyVideo.aspx”, el cual llamaremos pasandole por Querystrings el nombre del video a mostrar. El HTML es este:

   1:  <head runat="server">

   2:      <title>My Videos Zone</title>

   3:      <!-- Hacemos referencia de la libreria que contiene el flowPlayer -->

   4:      <script src="Player/flowplayer-3.1.3.min.js" type="text/javascript"></script>

   5:  </head>

   6:  <body>

   7:    <h1>Video Website - My Video Zone</h1>

   8:      <form id="frmMain" runat="server">

   9:      <div>

  10:          <script type="text/javascript">

  11:              flowplayer("player", "player/flowplayer-3.1.3.swf");

  12:          </script>

  13:          <!-- player container-->

  14:          <a  id="player" runat="server" style="display: block; width: 320px;>

  15:              height: 240px;"

16:

  17:              <!-- Utilizado para colocar una mascara y evitar que el player toque el video automatico. -->

  18:              <img src="Player/flow_eye.jpg" alt="My Video Player" />

  19:          </a>

20:

  21:      </div>

  22:      </form>

  23:  </body>

En la línea 4 se hace referencia a la libreria de FlowPlayer, línea 10 se coloca el player, línea 14 el link sobre cual video hace referencia el player, este se asignará en el code behind de la siguiente manera:

   1:   protected void Page_Load(object sender, EventArgs e)

   2:      {

   3:          if (Request["Id"] != string.Empty)

   4:          {

   5:              string video = "~/Videos/Converted/" + Request["Id"].ToString();

   6:              player.HRef = video;

   7:          }

   8:      }

El resultado es genial un archivo WMV de 25MB puede ser reducido a 666KB, el proyecto en ejecución se veria

de esta forma

El codigo fuente puede ser descardo desde Aquí:

Technorati Tags: ASP.NET,FFmpeg,FlowPlayer,Visual Studio