asp.net mvc - Jquery ajax form submit that contains files

Question

I have a very long form that contains files attachment:

this is how my form looks like:

The form will be submitted to this action:

[HttpPost]
public ActionResult AddReceivingConfirm(DTOreceiving entry,IEnumerable<HttpPostedFileBase> fileUpload)
    {

        return PartialView();
    }

through ajax call which is:

$(document).on('click', 'input[type="submit"].genericSubmit', function () {                    //generic function for ajax submit of ANY FORMS t

        if (!$("form#ValidateForm").valid()) {
                return false;
        };


        var frmData = $('.genericForm').serialize();
        var frmUrl = $('.genericForm').attr('action');
            $.ajax({
              type: 'post',
              url: frmUrl,
              data: frmData,

              success: function (e) {
                 $('#target').html(e);
             }
         });
         return false;
 });

everything is binding perfectly except the IEnumerable<HttpPostedFileBase>which always results to null,

the file part of my form is done like this:

 <tr>
 <td>Attachment #1: </td>
 <td colspan="3">
     <input id="file1" type="file" name="fileUpload" />
 </td>

 </tr>

  <tr>
  <td>Attachment #2: </td>
 <td colspan="3">
     <input id="file2" type="file" name="fileUpload" />
 </td>

 </tr>

  <tr>
  <td>Attachment #3: </td>
 <td colspan="3">
     <input id="file3 "type="file" name="fileUpload" />
 </td>

 </tr>

I have tried the brackets version and etc but it won't bind.

After an hour of researching, i've read that it's not possible(?) )to do file posting conventionally through the use of Ajax unless iframe. I am not sure of what my action will be, i kinda want to avoid using plugin so i wanna know if there is some "hacky" ways to access the files directly from my form?

this is my form:

using (Html.BeginForm("AddReceivingConfirm", "Wms", FormMethod.Post, new { id = "ValidateForm", @class = "genericForm" , enctype="multipart/form-data"}))

Answer 1

Unfortunately the jQuery serialize() method will not include input file elements. So your files are not going to be included in the serialized value.

What you should be doing is creating a FormData object, append the files to that. You need to append the form field values as well to this same FormData object. You may simply loop through all the input field and add it. Also, in the ajax call, you need to specify processData and contentType property values to false.

$(document).on('click', 'input[type="submit"].genericSubmit', function(e) {

    e.preventDefault(); // prevent the default submit behavior.

    var fdata = new FormData();

    $('input[name="fileUpload"]').each(function(a, b) {
        var fileInput = $('input[name="fileUpload"]')[a];
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            fdata.append("fileUpload", file);
        }
    });

    // You can update the jquery selector to use a css class if you want
    $("input[type='text'").each(function(x, y) {
        fdata.append($(y).attr("name"), $(y).val());
    });

    var frmUrl = $('.genericForm').attr('action');
    $.ajax({
        type: 'post',
        url: frmUrl,
        data: fdata,
        processData: false,
        contentType: false,
        success: function(e) {
            $('#target').html(e);
        }
    });

});