ASP MVC FIle Upload HttpPostedFileBase is Null

Question

In my controller I have, because I wanted to be able to fill out some details about the video and actually upload it, the Video class doesn't need the actual video because it's going to be passed to another web service.

public class VideoUploadModel
    {
        public HttpPostedFileBase vid { get; set; }
        public Video videoModel { get; set; }
    }

    //
    // POST: /Video/Create
    [HttpPost]
    public ActionResult Create(VideoUploadModel VM)
    {
        if (ModelState.IsValid)
        {
            db.Videos.AddObject(VM.videoModel);
            db.SaveChanges();
            return RedirectToAction("Index");  
        }

        ViewBag.UserId = new SelectList(db.DBUsers, "Id", "FName", VM.videoModel.UserId);
        return View(VM);
    }

and in my view I have

@model LifeHighlightsShoeLace.Controllers.VideoController.VideoUploadModel
@{
   ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("Create", "Video", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.ValidationSummary(true)
<fieldset>
    <legend>Video</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.videoModel.KalturaID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.videoModel.KalturaID)
        @Html.ValidationMessageFor(model => model.videoModel.KalturaID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.videoModel.Size)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.videoModel.Size)
        @Html.ValidationMessageFor(model => model.videoModel.Size)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.videoModel.Date)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.videoModel.Date)
        @Html.ValidationMessageFor(model => model.videoModel.Date)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.videoModel.UploadedBy)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.videoModel.UploadedBy)
        @Html.ValidationMessageFor(model => model.videoModel.UploadedBy)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.videoModel.UserId, "User")
    </div>

    <div class="editor-field">
        @Html.DropDownList("UserId", String.Empty)
        @Html.ValidationMessageFor(model => model.videoModel.UserId)
    </div>
    <div class="editor-field">
    <input name="model.vid" type="file" />
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

When I submit the form the videoModel part of VM is filled out but vid the actual file is null. Any ideas?

Answer 1

Update according to OP comment

set the Max file length in the web.config file Change the "?" to a file size that you want to be your max, for example 65536 is 64MB

<configuration>
  <system.web>
    <httpRuntime maxRequestLength="?" /> 
  </system.web>
</configuration>

You can't add the file to the model, it will be in it's own field not part of the model

<input name="videoUpload" type="file" />

Your action is incorrect. It needs to accept the file as it's own parameter (or if multiple use IEnumerable<HttpPostedFileBase> as the parameter type)

[HttpPost]
public ActionResult Create(VideoUploadModel VM, HttpPostedFileBase videoUpload)
{
    if (ModelState.IsValid)
    {
        if(videoUpload != null) { // save the file
            var serverPath = server.MapPath("~/files/" + newName);
            videoUpload.SaveAs(serverPath);
        }

        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    ViewBag.UserId = new SelectList(db.DBUsers, "Id", "FName", VM.videoModel.UserId);
    return View(VM);
}

If you were allowing multiple files to be selected you have to allow for that

[HttpPost]
public ActionResult Create(VideoUploadModel VM, IEnumerable<HttpPostedFileBase> videoUpload)
{
    if (ModelState.IsValid)
    {
        if(videoUpload != null) { // save the file
            foreach(var file in videoUpload) {
                var serverPath = server.MapPath("~/files/" + file.Name);
                file.SaveAs(serverPath);
            }
        }

        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    ViewBag.UserId = new SelectList(db.DBUsers, "Id", "FName", VM.videoModel.UserId);
    return View(VM);
}

Answer 2

The reason it isn't binding is because the model binder only looks at QueryString, Form, and RouteData when binding a complex model such as yours. The way to get around this is to have another parameter in your action method. (change your "name" to just "vid" as well)

[HttpPost]
public ActionResult Create(VideoUploadModel VM, HttpPostedFileBase vid)
{
    //add your vid to the model or whatever you want to do with it :)

    if (ModelState.IsValid)
    {
        db.Videos.AddObject(VM.videoModel);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    ViewBag.UserId = new SelectList(db.DBUsers, "Id", "FName", VM.videoModel.UserId);
    return View(VM);
}