Performancing Metrics

File upload en ASP.NET MVC - Return(GiS);

Return(GiS);

File upload en ASP.NET MVC

Es posible que tarde o temprano todos aquellos seguidores de ASP.NET MVC tengamos la necesidad de utilizar el típico FileUpload de Web Forms. Si nos fijamos, no existe un helper para este escenario por lo que necesitamos utilizar otra estrategia :D

En primer lugar debemos crear un formulario donde hagamos uso del tag input con el type=”file”. Pero eso no es todo, ya que además necesitaremos especificar a nivel de formulario el atributo enctype. Este atributo indica el tipo de contenido que se va a enviar al servidor. Como nos cuentan en la página oficial de W3, cuando el método utilizado es post el valor por defecto de este atributo es “application/x-www-form-urlencoded”. Sin embargo, si necesitamos hacer uso del elemento input de tipo file debemos modificar este valor por “multipart/form-data”. Dicho esto, nuestro formulario sería de la siguiente manera:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create a blob
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Create a new blob
    </h2>
    <div>
        <% using (Html.BeginForm("CreateBlob", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
           {%>
        <p>
            <input type="file" id="newFile" name="newFile" size="23" />
        </p>
        <p>
            <input type="submit" value="Upload file" /></p>
        <% } %>
    </div>
</asp:Content>

Por otro lado, para recuperar el archivo en la acción CreateBlob utilizaremos la clase HttpPostedFileBase junto con el name del elemento que recoge el archivo para poder bindearlo.

[HttpPost]
public ActionResult CreateBlob(HttpPostedFileBase newFile)
{
  if (newFile.ContentLength > 0)
  {
   SaveBlob(newFile.InputStream);
  }   return RedirectToAction("Index");
}

Espero que sea de utilidad :)

¡Saludos!

Posted: 9/12/2010 23:55 por Gisela | con 3 comment(s)
Archivado en:
Comparte este post:

Comentarios

Carles Company ha opinado:

Tambien podemos usar bindings directamente para pasar el fichero a la acción:

[HttpPost]

public ActionResult CreateBlob(HttpPostedFileBase newFile){

   //Retrieve the file by name

   var file = newFile

   if (file.ContentLength > 0) {  

       SaveBlob(file.InputStream);

   }

   return RedirectToAction("Index");

}

Un saludo.

Carles

# December 10, 2010 8:54 AM

Gisela ha opinado:

Hola Carles,

Muchas gracias por tu comentario :) La verdad es que me parece una manera más acertada utilizar bindings y la verdad no era consciente de que en este caso se podía hacer :)

Ya he modificado el código.

¡Gracias por tu aportación!

¡Saludos!

# December 10, 2010 11:15 AM

Osman ha opinado:

hola a todos. tengo una consulta... necesito su ayuda, en mi trabajo me piden crear una pagina que guarde una foto en una carpeta del servidor, esta foto debe estar amarrada al id_usuario que la suba para asi poder saber quien la cargó y mostrarla cuando se necesite, ademas necesito guardar el path de la ubicacion de esa imagen en una base de datos.

mi pregunta es como hago todo esto? ya que he logrado subir la imagen con xelupload hasta alli he podido llegar... muchisimas gracias por su valiosisima ayuda..

estoy pendiente de sus sugerencias

# February 21, 2011 4:45 PM