title: MVC5 - How to pass fileupload along with model to controller using jquery ajax
body: <p>I need to pass my upload file to my controller using jquery ajax.</p>
  
  <p>JS:</p>
  
  <pre><code>$('#btnpopupreg').click(function () {
          $.ajax({
              type: 'POST',
              url: '/Membership/Register',
              data: $('#frmRegister').serializeArray(),
              dataType: 'json',
              headers: fnGetToken(),
              beforeSend: function (xhr) {
  
              },
              success: function (data) {
                  //do something
              },
              error: function (xhr) {
  
              }
          })
  })
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>@model Test.RegisterViewModel
  
  @{
         using Html.BeginForm(Nothing, Nothing, FormMethod.Post, New With {.id = "frmPopUpRegister", .enctype = "multipart/form-data"})
  }
  
  &lt;input type="file" /&gt;
  //rest of my strongly typed model here
  &lt;input type="button" value="BUTTON" /&gt;
  //rest of the code here
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>[HttpPost()]
  [AllowAnonymous()]
  [ValidateAntiForgeryToken()]
  
  public void Register(RegisterViewModel model)
  {
  
      if (Request.Files.Count &gt; 0) { //always 0
  
      }
  
      if (ModelState.IsValid) {
            //do something with model
      }
  }
  </code></pre>
  
  <p>I can get the model value just fine but Request.Files always returns null. I also tried using HttpPostedFileBase but it also always return null</p>
  
  <pre><code>[HttpPost()]
  [AllowAnonymous()]
  [ValidateAntiForgeryToken()]
  
  public void Register(RegisterViewModel model, HttpPostedFileBase files)
  {
      //files always null
  
      if (ModelState.IsValid) {
            //do something with model
      }
  }
  </code></pre>