HttpPostedFileBase ImageUpload is always null in asp.net mvc 5

Question

I try to create a project in aps.net mvc 5, but I can't save an image in my local directory... The attribute: (HttpPostedFileBase ImageUpload) of my entity (Perfil), is always null translating to English: Profile = Perfil

Can someone help me please?

. My Entity:

[Table("Perfil")]
public class Perfil
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    [Key]
    public int idPerfil { get; set; }

    [Required]
    [ForeignKey("Usuario")]
    public int idUsuario { get; set; }

    [Required]
    [ForeignKey("Genero")]
    public int idGenero { get; set; }

    [DisplayName("Descrição:")]
    public string descricao { get; set; }

    public string linkMultimidia { get; set; }

    [DataType(DataType.ImageUrl)]

    public string ImageUrl { get; set; }

    [DataType(DataType.Upload)]
    [NotMapped]
    public HttpPostedFileBase ImageUpload { get; set; }

    public virtual Usuario Usuario { get; set; }

    public virtual Genero Genero { get; set; }
}

}

My Controller:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "idPerfil,idUsuario,idGenero,descricao,linkMultimidia,fotoPerfil")] Perfil perfil)
    {
        var validImageTypes = new string[]
        {
            "image/gif",
            "image/jpeg",
            "image/pjpeg",
            "image/png"
        };

        if (perfil.ImageUpload == null || perfil.ImageUpload.ContentLength == 0)
        {
            ModelState.AddModelError("ImageUpload", "This field is required");
        }
        else if (!validImageTypes.Contains(perfil.ImageUpload.ContentType))
        {
            ModelState.AddModelError("ImageUpload", "Please choose either a GIF, JPG or PNG image.");
        }

            if (ModelState.IsValid)
            {
                if (perfil.ImageUpload != null && perfil.ImageUpload.ContentLength > 0)
                {
                    var uploadDir = "~/Imagens";
                    var imagePath = Path.Combine(Server.MapPath(uploadDir), perfil.ImageUpload.FileName);
                    var imageUrl = Path.Combine(uploadDir, perfil.ImageUpload.FileName);
                    perfil.ImageUpload.SaveAs(imagePath);
                    perfil.ImageUrl = imageUrl;
                }

                    rep.IncluirPerfil(perfil);
                    return RedirectToAction("Index");
            }

        ViewBag.idGenero = new SelectList(db.Generos, "idGenero", "nomeGenero", perfil.idGenero);
        ViewBag.idUsuario = new SelectList(db.Usuarios, "idUsuario", "nome", perfil.idUsuario);
        return View(perfil);
    }

My Create View:

    <div class="form-group">
        @using (Html.BeginForm("Create", "PerfilController", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
             <div class="col-md-10">   
                @Html.LabelFor(model => model.ImageUpload)
              </div>
                 @Html.TextBoxFor(model => model.ImageUpload, new { type = "file" })
            }            
      </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

I tried other solutions, but continued null...

Answer 1

The submit button must be inside using block:

<div class="form-group">

    @using (Html.BeginForm("Create", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
    {
        @Html.AntiForgeryToken()
        <div class="col-md-10">
            @Html.LabelFor(model => model.ImageUpload)
        </div>
        @Html.TextBoxFor(model => model.ImageUpload, new {type = "file"})
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default"/>
            </div>
        </div>
    }
</div>

Also add ImageUpload to Bind list:

public ActionResult Create([Bind(Include = "idPerfil,idUsuario,idGenero,descricao,linkMultimidia,fotoPerfil, ImageUpload")] Perfil perfil)

One more thing , You can use Exclude instead of Include in your case.

Answer 2

I solved!

Entity:

public string photoPath{ get; set; }

Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "idPerfil,idUsuario,idGenero,descricao,linkMultimidia,photoPath")] Perfil perfil)
{
    string filename = perfil.photoPath;

    var uploadDir = "~/Imagens";
    var imagePath = Path.Combine(Server.MapPath(uploadDir), filename);
    var imageUrl = Path.Combine(uploadDir, filename);
    perfil.photoPath = imageUrl;

    if (ModelState.IsValid)
    {
        rep.IncluirPerfil(perfil);
        return RedirectToAction("Index");
    }

    ViewBag.idGenero = new SelectList(db.Generos, "idGenero", "nomeGenero", perfil.idGenero);
    ViewBag.idUsuario = new SelectList(db.Usuarios, "idUsuario", "nome", perfil.idUsuario);
    return View(perfil);
}

Create View:

<div class="form-group">
    @Html.LabelFor(model => model.photoPath, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.photoPath, new { type = "file" })
        @Html.ValidationMessageFor(model => model.photoPath)
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Create" class="btn btn-default" />
    </div>
</div>