How to upload files using ajax to asp.net mvc controller action
<p>I have this submit code, </p>

<pre><code>$('#form').on('submit',function (e) {
    e.preventDefault();
    //var file = $("#productImg");
    var fileUpload = $("#productImg").get(0);
    var files = fileUpload.files;


    var form = $("#form");
    var formData = new FormData();
    formData.append("product", form.serialize());

    // Looping over all files and add it to FormData object  
    for (var i = 0; i &lt; files.length; i++) {
        formData.append(files[i].name, files[i]);
    }
    //formData.append("file", file);

    $.ajax({
        type: 'POST',
        url: baseUrl + 'Controller/Action',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
        }
    });
});
</code></pre>

<p>This is my controller :</p>

<pre><code>  public JsonResult AddProduct(ProductModel product) // data is binded in the model if I remove content type property
    {
        var isSuccess = false;

        if (product != null)
        {
            try
            {
                if (Request.Files.Count &gt; 0) // works ok if I added the content type property
                {
                    var sadas = "sad";
                }
</code></pre>

<p>So what's happening here is I sending the <code>serialized form</code> data into mvc controller together with the uploaded file.</p>

<p>The problem here is , when i added this ajax property <code>contentType: false,</code>, I can successfully postback the files, but the binded model is null.</p>

<p>On the other hand, If i remove this property, the binded model works OK. But the problem is the file was not sent in the server.</p>

<p>How can I make this work? I want both the form and images  to be sent in server side.</p>

<p><strong>UPDATE</strong>
This is working now, the only line I changed is this</p>

<p><code>formData.append("product", form.serialize());</code></p>

<p><strong>TO</strong></p>

<p><code>var other_data = $('#addProductForm').serializeArray();
$.each(other_data, function (key, input) {
    formData.append(input.name, input.value);
});</code></p>

<p>Can someone explain what is happening? I got no clue</p>