Ir al contenido principal

Uploadify para subir ficheros en ASP.NET MVC 2

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.





Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo darse de baja en Xing

Tras varios años sin apenas usar esta red social profesional decido darme de baja. Ya empezaba a sentirme retrasado al no encontrar la forma de hacerlo en los menús,  así que me meto en google y veo en un par de foros que no soy ni mucho menos el único con el mismo problema.

Tipos de mujeres en Badoo

Aviso, esto va a parecer la clase de artículo que sale en revistas de quinceañeras. No voy a ser metódico ni amable. Aquí describo  los distintos perfiles de mujeres de hasta 30 años con las que he llegado a tener conversaciones en Badoo. Que aquí sólo critique a ciertas chicas no significa que los hombres seamos mejores, ni mucho menos. Al tema:

Trucos Badoo de un perro viejo

Dentro de poco haré 3 años en Badoo . Tuve una primer época en el que me lo tomé muy en serio, estuve muy metido y tuve los mejores resultados. De aquellas experiencias acabé escribiendo ésta, la página de más éxito de este blog . Pero ya llevo una muy larga temporada en el que entro de forma bastante intermitente.  ¿Está este artículo escrito por alguien harto de badoo? ¿Estoy quemado como la mayoría? Yo diría que no, pero...