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 😀

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!