title: MVC upload and save form image with Ajax
body: <p>I have a form with 3 inputs (text, image, submit button).</p>
  
  <pre><code>@using (Html.BeginForm("Save", "User", FormMethod.Post, new {Id="Form1", enctype = "multipart/form-data"}))
          {
          &lt;input id="FileUploadInput" name="Image" type="file"/&gt;
          &lt;input id="FirstName"  Name="FirstName"&gt;
          &lt;input type="submit" id="inputSubmit" value="Save" /&gt;
          }
  </code></pre>
  
  <p>Now i want to submit this form from javascript with AJAX</p>
  
  <pre><code>$("#inputSubmit").click(function (e) {
              e.preventDefault();
              var form = $("#Form1");
              form.validate();
              if (form.valid()) {
                  $.ajax({
                      url: "/User/Save",
                      data: form.serialize(),
                      type: "POST",
                      success: function (data) {
                          if (data === "") {
                              location.reload();
                          }
                          else {
                              $(".content").html(data);
                              $.validator.unobtrusive.parse($(".content"));
                          }
                      }
                  });
              }
  
              return false;
          });
  </code></pre>
  
  <p>In my controller file i have.</p>
  
  <pre><code>public ActionResult Save(UserProfileSettings settings)
  {
    var image = setings.Image
    var name = settings.Firstname
  }
  </code></pre>
  
  <p>My model</p>
  
  <pre><code>public class UserProfileSettings
  {
     public string FirstName { get; set; }
     public HttpPostedFileBase Image { get; set; }
  }
  </code></pre>
  
  <p>The problem is that in my controller method i am getting settins.FirstName, but settings.Image is always null. I think, that with this method it is not possible to serialize image file. </p>