Sígueme en Facebook

22 de noviembre de 2010
3 comentarios

Uploadify para subir ficheros en ASP.NET MVC 2

19:57
Qué es Uploadify?

Uploadify es un plug-in de jQuery que implementa la carga de ficheros en un aplicación web mediante la tecnología Ajax. Además, incluye una barra para monitorizar el proceso de forma visual, eso sí, utilizando un pequeño swf, es decir, flash.

-------------------------------------------------------------------------------------------------------------------------------
Nota: Si lo que realmente necesitas es realizar una subida simple de un único fichero te recomiendo este post:
http://geeks.ms/blogs/etomas/archive/2010/09/08/subir-ficheros-al-servidor-en-asp-net-mvc.aspx
o este para encapsularlo en un DTO:
http://dotnetslackers.com/articles/aspnet/ASP-NET-MVC-and-File-Uploads.aspx
-------------------------------------------------------------------------------------------------------------------------------

Puedes descargarte el código de la fuente original aquí y cargar lo que te interese por partes o quizás prefieras un proyecto esquemático y básico pero ya montado en Mvc2 con el framework 4.0 aquí

Muy bien, descomprime y carga el proyecto desde el VS 2010.  Lánzalo.





En este caso ha de seleccionarse el (o los) ficheros a cargar y una vez completada la lista darle al botón ‘Upload File’.  No tardarán en aparecer los títulos en el panel inferior. El plug-in es altamente modificable según los parámetros introducidos, por lo que podría configurarse, por ejemplo, para que comience la carga nada más seleccionar el fichero.

Veamos que hay debajo de este interfaz.


Controladores



Lo primero que vamos a hacer es crear un controlador que procesará los ficheros. Aquí tenemos el código de UploadController.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.IO; using UploadBasico.Models; namespace UploadBasico.Controllers {     public class UploadController : Controller     {         public ActionResult Index()         {             return RedirectToAction("Upload");         }         #region Upload Methods         [HttpGet]         public ActionResult Upload()         {             return View();         }         /// Guarda el fichero subido a la carpeta App_Data/ficheros y devuelve un mensaje         /// de vuelta al plugin de de jQuery uploadify         /// </summary>         /// <param name="fileData"></param>         /// <returns></returns>        [HttpPost]         public ActionResult Upload(HttpPostedFileBase fileData)         {             try             {                 fileData.SaveAs(Server.MapPath("~/FicherosSubidos/") + Path.GetFileName(fileData.FileName));             }             catch (Exception ex)             {                 return Content("Error subiendo fichero: " + ex.Message);             }             return Content("Fichero subido correctamente!");         }         #endregion         #region Ajax Methods         /// <summary>         /// Devuelve una lista de ficheros de la carpeta de subida          /// a la llamada Jquery Ajax $.get         /// </summary>         /// <returns></returns>        [HttpGet]         public ActionResult GetPhotoList()         {             // Get a list of files in the Uploads folder.            string path = Server.MapPath("~/FicherosSubidos/");             DirectoryInfo di = new DirectoryInfo(path);             FileInfo[] files = di.GetFiles();             // Initialize some variables.            FicheroSubido photo = null;             List<FicheroSubido> photoList = new List<FicheroSubido>();             // Loop through all the files in the Uploads folder             // and add them to the list of FicheroSubido types.            foreach (var file in files)             {                 photo = new FicheroSubido();                 photo.FileName = Path.GetFileName(file.FullName);                 photo.Path = "/FicherosSubidos/" + Path.GetFileName(file.FullName);                 photoList.Add(photo);             }             // Merge the list of FicheroSubido types with the UserControl             // to render HTML and return it to the jQuery call.            return View("ListView", photoList);         }         #endregion     } }



Vemos que no son necesarias toneladas de código para realizar la base de lo que queremos. Ahora vamos a echarle un vistazo a la vista para ver como se llama al pluging de jQuery.


La Vista

Necesitaremos un .aspx que aloje a los controles y al javascript que hace la llamada a nuestro plugin. También una vista parcial fuertemente tipada a la que le pasaremos un lista de objetos. La clase contenida en la carpeta Model define este objeto. 




ListView.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<UploadBasico.Models.FicheroSubido>>" %>
<% foreach(var item in Model)
  { %>
    <li><a href="<%= item.Path %>"><%= item.FileName %></a></li>
<%} %>


Upload.aspx



<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">     Upload </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  <h2>         Upload</h2>     <p>         Click the "Browse" button to select the file to upload.</p>         <input type="file" id="filename" name="filename" />     <p>         <button id="upload-file">Upload File</button>     </p>     <div id="message"></div>     <fieldset>         <legend>Photo List</legend>         <ul id="photoList">         </ul>     </fieldset>      <script type="text/javascript">         $(function() {             // Get a reference to the div for messages.            var message = $("#message");                // Initialize the plugin to the "file" input element.            $("#filename").uploadify({                 'uploader': '<%= Url.Content("~/Scripts/uploadify.swf") %>',                 'script': '<%= Url.Action("Upload", "Upload") %>',                 'multi': true,                 'cancelImg': '<%= Url.Content("~/Content/cancel.png") %>',                 'folder': '/FicherosSubidos/',                 'fileDataName': 'fileData',                 'fileDesc': 'Upload an image file',                 'fileExt': '*.*',                 'onError': function(event, queue, fileInfo, error) {                     // Display the error message in red.                    message.css("color", "red");                     message.html("Error " + error.type + ": " + error.text);                 },                 'onComplete': function(event, queueId, fileObj, response, data) {                     // Display the successful message in green and fade out                      // after 3 seconds.                    message.css("color", "green");                     message.html(response);                     message.fadeIn().delay(3000).fadeOut();                     // Reload the list of photos                    LoadPhotoLinks();                 }             });                            // The event handler for the Upload button.            $("#upload-file").click(function() {                 // Refer to the documentation for this method...                 // $("#some-file-input").uploadifyUpload();                // http://www.uploadify.com/documentation/                $("#filename").uploadifyUpload();             });                // The function to render the list of photos.            function LoadPhotoLinks() {                 var photoList = $("#photoList");                 $.get("/Upload/GetPhotoList", null, function(data) {                     photoList.html(data);                 });             }               // Now call this function when the page loads.            LoadPhotoLinks();         });       </script> </asp:Content>


Como puedes ver se han añadido las librerías necesarias en el Site.Master, incluyendo la última versión de jQuery, el código propio de uploadify y uno para el pequeño flash. En la línea 31 puedes ver la llamada al plug-in. Hay unas cuantas opciones básicas que no voy a repasar por autodescriptivas. Mira la documentación para averiguar todas las opciones o simplemente mira en la librería de javascript donde el código comentado ya te habla de la mayoría de las opciones. Cuidado porque en este último código no están todas.


La opción ‘FileDataName’ es fundamental para que todo funcione. Es el nombre que se le pasa al servidor y al mismo tiempo al controlador en la acción del Upload. Hay que resaltar que se está pasando un tipo HttpPostedFileBase en lugar de FormCollection, aunque con las modificaciones necesarias también debería funcionar.


 El manejador de eventos ‘onComplete’ es el que llama a la acción del controlador que repinta la lista una vez terminado el proceso. Esta acción simplemente obtiene los ficheros subidos en la carpeta definida en el recurso como carpeta de subida y genera la lista de objetos que se le pasa fuertemente tipada a la vista parcial para que sea renderizada como HTML.


Conclusión


 Pues esto es lo que hay. Puede verse que no es demasiado complicado. Si tienes alguna duda pásate por los foros de Uploadify ya que no voy a tener tiempo para responder dudas en este blog. Agradecer a King Wil der el código que publicó y que he podido reutilizar en parte.





3 comentarios:

  1. No tendrás una versión de estos scripts pero para ASP Classic?

    ResponderEliminar

 
Toggle Footer
Top