title: jQuery ajax upload file with id
body: <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>