HttpPostedFileBase with PartialView

Question

I have a main view which contains a partial view. The model of partial view has 1 property called "HttpPostedFileBase file", together with other properties

However when the main-view get posted, all the other properties in that model get correct value, but the "HttpPostedFileBase file" is null. I already set the name of to be the same as parameter. Also even Request.Files give me 0 number of files.

What have I done wrong?

P.S. My main-view actually has 2 partial views. One PV has the same model as main-view. The 2nd one is what I mentioned above. The model contains a list of objects and HttpPostedFileBase file. Code like this:

public class MyPartialViewModel
{
    public List<MyObject> objInfos { get; set; }


    public ICollection<HttpPostedFileBase> file { get; set; }
}

And in the PV I looply use @Html.EditFor(model=>model.objInfos[i]) to bind it to a template.

So in main-view post method, I could get "objInfos" list & all ojects' value correct. But just NULL for "file".

score 1 · Answer 1 · edited Nov 09 '12 at 10:20

1

Try adding enctype = "multipart/form-data" as one of the htmlAttributes in the @Html.BeginForm() helper.

EDIT: To not make a visual full postback:

AJAX FILE Upload in MVC3 using iFrame

In this right moment I'm using this approach, actually implementing this as we write.

edited Nov 09 '12 at 10:20

VJAI

32,167
23
102
164

answered Nov 09 '12 at 01:25

Romias

13,783
7
56
85

Actually I added like this: @using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "mainSection", OnSuccess = "handleSuccess", OnFailure = "handleError" }, new { enctype = "multipart/form-data" })) {} – Samuel Nov 09 '12 at 01:31
Ahh, that is the problem. It is needed a full postback in order to successfully upload the file. It is not possible to do an upload using Ajax. – Romias Nov 09 '12 at 01:39
I previously use iframe (replace 2nd PV) which works fine..... and because I want to put iframe & 1st PV validation result together, I found it's too hard to do in iframe... that why I changed 2nd one to PV as well ..... :( – Samuel Nov 09 '12 at 01:49

score 1 · Answer 2 · answered Nov 26 '12 at 22:55

I've just come across the same problem, and have worked around it by placing an extra parameter in the ActionResult to take the file upload parameter.

    [Authorize]
    [HttpPost]
    public ActionResult MyActionResult(MyViewModel viewModel, HttpPostedFileBase myFileToUpload)
    {
        myViewModel.PartialViewModel.MyFileToUpload = myFileToUpload;
            //manually bind MyFileToUpload;
            //for some reason, because it's in the Partial View and it's of type HttpPostedFileBase, it won't post.

        return View(viewModel);
    }

Just for context:

My PartialViewModel contains the code:

    public HttpPostedFileBase MyFileToUpload{ get; set; }

and PartialView the code:

    <div class="editor-item">
        <div class="editor-label">
            @Html.LabelFor(model => model.MyFileToUpload)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MyFileToUpload)
        </div>
    </div>

Finally, I have an EditorTemplate Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml:

@model HttpPostedFileBase
<input type="file" name="@ViewData.ModelMetadata.PropertyName" />

It's a workaround, not a solution, but does enable you to get the file uploaded while leaving the HttpPostedFileBase in the PartialViewModel.

HttpPostedFileBase with PartialView

2 Answers2