title: ASP.NET MVC5 - file upload form using Ajax and FormData is always null
body: <p>My form:</p>
  
  <pre><code>@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "userForm", enctype = "multipart/form-data"}))
  
  {
      @Html.AntiForgeryToken()
  
  
          &lt;div class="form-horizontal"&gt;
              &lt;h4&gt;Phone&lt;/h4&gt;
              &lt;hr /&gt;
              @Html.ValidationSummary(true)
  
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.Identification, new { @class = "control-label col-md-2" })
                      &lt;div class="col-md-10"&gt;
                          @Html.EditorFor(model =&gt; model.Identification)
                          @Html.ValidationMessageFor(model =&gt; model.Identification)
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.Location, new { @class = "control-label col-md-2" })
                      &lt;div class="col-md-10"&gt;
                          @Html.EditorFor(model =&gt; model.Location)
                          @Html.ValidationMessageFor(model =&gt; model.Location)
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.AttachmentFile, new { @class = "control-label col-md-2" })
      &lt;div class="col-md-10"&gt;
          &lt;input type="file" name="AttachementFile" id="AttachementFile" /&gt;
          @Html.ValidationMessageFor(model =&gt; model.AttachmentFile)
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  }
  </code></pre>
  
  <p>My ajax:</p>
  
  <pre><code> $(document).ready(function () {
          $('#button').on("click", function () {
              var selected = $('#HwType').val();
              var theData = $("#userForm").serialize();
  
  
              var form = $('form')[0];
              var formData = new FormData(form);
  
              $.ajax({
                  type: "POST",
                  url: selected + "/Create",
                  data: formData,
                  contentType: false,
                  cache: false,
                  processData: false,
                  success: function (response, status, xhr) {
                      $('#partialPlaceHolder').html('');
                      $('#messageHolder').html("Added to database");
                      $('#but').html('');
                      $('#HwType').val('choice');
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                      $.each(jsonReponse, function (key, error) {
  
                          $('input[name="' + error.key + '"]').after(' ' + error.errors);
  
                      });
  
                      $('#messageHolder').html('Some fields were incorrect, please fix and resubmit');
  
                  }
              })
          })
  </code></pre>
  
  <p>When I place a breakpoint in the Controller's Action Create method at the incoming ViewModel, the HttpPostedFileBase file is always null.</p>
  
  <p>I thought that using FormData would solve that issue but no luck. I also tried to put the file input outside my form and appending it to the FormData object, but same result.</p>
  
  <p>What am I doing wrong?</p>