Question

Ok this is driving me potty! I have a simple modal popup triggered by a Ajax.ActionLink in this popup I have a standard HTML file input control as well as some other text fields. When I submit I can get all my text fields no problem but the file is always null. Below is a copy of my code:

Update Action:

[HttpPost]
    public ActionResult UpdateClip(ClipModel model, HttpPostedFileBase FileData, string clipID)
    {
        return RedirectToAction("Clips");
    }

This is the form from the partial which is shown in the modal window:

<div class="modal_content">
    @using (Html.BeginForm("UpdateClip", "EditProfile", new { clipid = Model.ID }, FormMethod.Post, new { @id = "modalpopupform", enctype = "multipart/form-data" }))
    {
        <ul class="list_to_row">
            <li class="cell" style="width: 75px">Clip Description</li>
            <li class="cell">
                @Html.TextBoxFor(m => m.Description, new { style = "width: 350px" })<br />
                @Html.ValidationMessageFor(m => m.Description)
            </li>
        </ul>
        <ul class="list_to_row">
            <li class="cell" style="width: 75px">Base Cost</li>
            <li class="cell">
                @Model.BaseCost
            </li>
        </ul>
        <ul class="list_to_row">
            <li class="cell" style="width: 75px">Cost</li>
            <li class="cell">
                @Html.TextBoxFor(m => m.UserCost, new { style = "width: 350px" })<br />
                @Html.ValidationMessageFor(m => m.UserCost)
            </li>
        </ul>
        <ul class="list_to_row">
            <li class="cell" style="width: 75px">Preview Image</li>
            <li class="cell">
                <input type="file" id="file" name="file" />
            </li>
        </ul>
        <div class="clearfix"></div>
        <div class="modal_button_area">
            <input id="submitmodalpopup" type="submit" value="Update" class="button" />
            <input id="closemodalbox" type="button" value="Cancel" class="button" />
        </div>     
    }
</div>

Can someone please shed some light on this? Google doesn’t seem to have anything wheather its my combination of words or if I’ve missed something simple I don’t know. Cheers.

Answer 1

In your action the argument is called FileData so be consistent in your markup as well:

<input type="file" id="file" name="FileData" />

Or if you want to keep file as name of your input, then rename the argument in your action:

[HttpPost]
public ActionResult UpdateClip(ClipModel model, HttpPostedFileBase file, string clipID)
{
    return RedirectToAction("Clips");
}

But personally I would include this file as property of my view model and I won’t bother with an additional argument:

public class ClipModel 
{
    ... some properties

    public HttpPostedFileBase File { get; set; }
}

and then in my strongly typed view I will use a strongly typed helper to generate the file input so that I don’t have to worry about proper naming:

<li class="cell">
    @Html.TextBoxFor(x => x.File, new { type = "file" })
</li>

and your controller action signature will be as simple as:

[HttpPost]
public ActionResult UpdateClip(ClipModel model)
{
    return RedirectToAction("Clips");
}

which is how most POST controller action signatures should look like.