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!

3 comentarios sobre “File upload en ASP.NET MVC”

  1. 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

  2. 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!

  3. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *