Html.BeginForm works but not Ajax.BeginForm

Question

I have an ASP MVC app that is attempting to submit my ViewModel which has a property called Document on it that is an HttpPostedFileBase. The ViewModel binds fine when I use @Html.BeginForm, however if I change it to @Ajax.BeginForm and keep all things the same, it will bind the all the ViewModel properties EXCEPT for the HttpPostedFileBase property. Any advice?

Relevant Code:

 [HttpPost]
    public ActionResult Add(ViewModel vm)
    {
        return new HttpStatusCodeResult(200);
    }

 @using (Ajax.BeginForm("Add", "Home", new AjaxOptions() {  HttpMethod = "Post" , AllowCache = false}, new { enctype = "multipart/form-data" }))
            {
                @Html.HiddenFor(m => Model.Document.DocumentType);
                @Html.HiddenFor(m => Model.Document.DocumentTypeId);
                @Html.HiddenFor(m => Model.Document.File);

                <div class="container">
                    <table>
                        <tr>
                            <td>
                                <input class="form-control" type="text" id="lblAllReceivables" />                                </td>
                            <td >
                                @Html.TextBoxFor(m => m.Document.File, new { type = "file", @class = "inputfile", @name = "file", @id = Model.Document.DocumentTypeId, @accept = ".pdf, .doc, docx" })
                                <label id="lblUpload" for="@Model.Document.DocumentTypeId"><i class="fa fa-upload" style="margin-right:10px;"></i>File</label>

                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" >
                                Comments:<br />
                                <div class="input-group" style="width:100%;">
                                    @Html.TextAreaFor(m => m.Document.Comments)

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><hr /></td>
                        </tr>
                        <tr><td colspan="2" >  <input id="btnSubmit" class="btn btn-default btn-lg" type="submit" style="width:275px;" value="Submit  Application" /><a class="btn btn-default">Cancel</a></td></tr>
                    </table>
                </div>
            }

Answer 1

I have found that the browser does not support uploading a file via xmlhttprequest, which is what ajax.beginform uses to post data (as do all browser ajax libs). If you are using a html 5 browser, you can use the new file api to upload the file. for older browsers, you use an iframe to post the file. google for jquery plugin that wrap both those functions or just use the iframe appraoch (it pretty trival).

In specific cases I prefer to use another plugins like DropzoneJS it's better to handle it and you can upload multiple files easy.