Question

I have a form which binds a model and a file upload using the default binder for HttpPostedFileBase.

This works fine when using Html.BeginForm(). However, I wanted to perform the same action using AJAX so I replaced this with Ajax.BeginForm() changing the parameters accordingly.

The model still binds correctly, however I can’t get the file upload to bind to the HttpPostedFileBase.

This binds the model and the file upload:

<% using (Html.BeginForm("MapUpdateColumns", "RepositoryAdmin", FormMethod.Post, new { id = "UpdateDataset", enctype = "multipart/form-data" })) {%>

This only binds the model:

<% using (Ajax.BeginForm("MapUpdateColumns", "RepositoryAdmin", new AjaxOptions { UpdateTargetId = "columnMappings" }, new { id = "UpdateDataset", enctype = "multipart/form-data" })) {%>

The controller action:

public ActionResult MapUpdateColumns(DatasetViewModel model, HttpPostedFileBase sourceFile)

Should this be possible, and if so what am I doing wrong? Thanks.

Answer 1

You cannot upload files with AJAX. One way to achieve this is to use a hidden iframe which will simulate an AJAX call and perform the actual file upload or use Flash. Here’s a very nice jQuery Form plugin using a hidden iframe which is capable of transparently ajaxifying a form submission containing file fields.