Question

Possible Duplicate:
MVC. HttpPostedFileBase is always null

I want users to be able to upload an image and store it on the server for later reference.

Here’s some code:

SliderController.cs:

public ActionResult Create()
{
  return View(new SliderImageViewModel());
}

[HttpPost]
public ActionResult Create(SliderImageViewModel sliderImage)
{
  if (ModelState.IsValid)
  {
    var slider = new SliderImage();
    var lastSortOrder =
      Context.SliderImages.Select(p => p.SortOrder).DefaultIfEmpty(0).Max();
    slider.SortOrder = lastSortOrder + 1;

    //TODO: upload image to server and get physical path (GUID)
    //slider.ImageUrl = physical path

    Context.SliderImages.Add(slider);
    Context.SaveChanges();
    return RedirectToIndex();
  }
  else
    return View(sliderImage);
}


public class SliderImageViewModel
{
  [RequiredValue]
  public HttpPostedFileBase Image { get; set; }
  private string _Content;
  public string Content
  {
    get
    {
      if (string.IsNullOrWhiteSpace(_Content))
        return null;
      else
        return _Content;
    }
    set { _Content = value; }
  }
}

Create.cshtml:

@using (Html.BeginForm("Create", "Slider", FormMethod.Post))
{
  @Html.ValidationSummary(true)

  <fieldset>
    <legend>Page</legend>

    <div class="editor-label">
      @Html.Label("Content")
    </div>
    <div class="editor-field">
      @Html.TextBox("content")
    </div>

    <div class="editor-label">
      @Html.Label("Image")
    </div>
    <div class="editor-field">
      @Html.TextBox("image", null, new { type = "file", accept = "image/*" })
    </div>

    <p>
      <input type="submit" value="Save" />
    </p>

  </fieldset>
}

When I submit the form, the Image property in the sliderImage argument is null (the Content works tho), how should I fix this?

Answer 1

You need to set the enctype attribute to multipart/form-data on your form if you want to be able to upload files:

@using (Html.BeginForm("Create", "Slider", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ...
}

Take a look at the following article for further details.