jQuery ajax upload file with id
<p>Im using ASP.NET MVC5. My goal was to upload file using jQuery ajax. When successful, return a partial view of the uploaded files in a table. When I step through the jQuery code, the id and files are correct, but when stepped into Action, both parameters are null. Here are my codes:</p>

<p>Controller's Action:</p>

<pre><code>[HttpPost]
        public ActionResult AddAttachments(string id, IEnumerable&lt; HttpPostedFileBase&gt; files)
        {            
            if (files != null)
            {
                //save files
            }
            var cardKey = db.CardKeys.Single(s =&gt; s.CardKeyID == Convert.ToInt32(id));
            var attachments = cardKey.Request.Attachments;
            return PartialView("_AttachmentsTable",attachments);
        }
</code></pre>

<p>jQuery:</p>

<pre><code>$(function () {
    var table = $("#attachmentTable").DataTable();
    var path = MySettings.addAttachmentURL;
    $("#btnAddAttachment").click(function (event) {
        event.preventDefault();

        var formData = new FormData();
        var cardKeyID = $("#CardKeyID").val();

        var formData = $.each($("#files")[0].files, function (i, file) {
            formData.append('file-' + i, file);
        });
        console.log("formData = " + formData);
        $.ajax({
            type: "POST",
            url: path,
            contentType: false,
            processData:false,
            cache:false,
            data: {id:cardKeyID,files: formData },
            success: function (partialResult) {
                $("#tableData").html(partialResult);
                table = $("#attachmentTable").DataTable();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#message").html(JSON.stringify(jqXHR).toString());
                alert("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });
});
</code></pre>

<p>Razor View:</p>

<pre><code>&lt;fieldset&gt;
            &lt;legend&gt;Add Attachments&lt;/legend&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
                &lt;div class="form-group"&gt;
                    @Html.Label("File Upload", new { @class = "control-label col-md-6" })
                    &lt;div class="col-md-6"&gt;
                        &lt;input type="file" id="files" name="files" multiple/&gt;&lt;br /&gt;
                        &lt;input type="submit" id="btnAddAttachment" value="Add Attachment"/&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;div class="form-group"&gt;
                    @Html.Label("File Description", new { @class = "control-label col-md-6" })
                    &lt;div class="col-md-6"&gt;
                        @Html.TextBox("FileDescription")
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;div class="form-group"&gt;
                    @Html.Label("Comment", new { @class = "control-label col-md-6" })
                    &lt;div class="col-md-6"&gt;
                        @Html.TextBox("Comment")
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="tableData"&gt;
            @Html.Partial("_AttachmentsTable",Model.Request.Attachments)
        &lt;/div&gt;
        &lt;/fieldset&gt;
</code></pre>