title: Trying to POST image file - parameter in ActionResult is null
body: <p>I want to do a fileupload with MVC and jQuery but my paremter is null. In my jQuery I am getting the form data and assigning it a variable and then POSTING it to an ActionResult. My parameter is null and I am not sure if I am passing the data correctly.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;img src="@Url.Content("~/AMTImages/UserAvatar.png")" width="64" height="64" style="border: thin solid" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;form enctype="multipart/form-data" id="imageUploadForm"&gt;
                              &lt;table&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;@Html.LabelFor(m =&gt; m.DisplayName, "Display Name: ")&lt;/td&gt;
                                      &lt;td style="padding-left: 10px;"&gt;@Html.TextBoxFor(m =&gt; m.DisplayName)&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;@Html.LabelFor(m =&gt; m.UserImage, "User Image: ")&lt;/td&gt;
                                      &lt;td style="padding-left: 10px; float: right;"&gt;@Html.TextBoxFor(m =&gt; m.UserImage, new { type = "file", accept = "image/*" })&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/form&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;table style="display:none;"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;progress&gt;&lt;/progress&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(':file').change(function () {
      var file = this.files[0];
  
      $.ajax({
          url: '@Url.Action("UploadImage", "User")',  //Server script to process data
          type: 'POST',
          data: file,
          beforeSend: function() {  
          },
          success: function () {
          },
          error: function () {
          },
          processData: false,
          contentType: file.type
      });
  });
  </code></pre>
  
  <p><strong>ActionResult</strong></p>
  
  <pre><code> public ActionResult UploadImage(HttpPostedFileBase file)
          {
              if (file != null &amp;&amp; file.ContentLength &gt; 0)
                  try
                  {
                      string path = Path.Combine(Server.MapPath("~/Images"),
                                                 Path.GetFileName(file.FileName));
                      file.SaveAs(path);
                      ViewBag.Message = "File uploaded successfully";
                  }
                  catch (Exception ex)
                  {
                      ViewBag.Message = "ERROR:" + ex.Message.ToString();
                  }
              else
              {
                  ViewBag.Message = "You have not specified a file.";
              }
  
              return View();
          }
  </code></pre>