title: File-upload saves empty file
body: <p>I am writing file uploading module in c# using ajax&amp;jQuery on ASP.NET MVC 5</p>
  
  <p>I tried msdn example for backend code</p>
  
  <pre><code>    [HttpPost]
      public ActionResult Upload()
      {
          if (Request.Files.Count != 0)
          {
              for (int i = 0; i &lt; Request.Files.Count; i++)
              {
                  var file = Request.Files[i];
                  var fileName = Path.GetFileName(file.FileName);
                  var path = Path.Combine(Server.MapPath("~/Junk/"), fileName);
                  file.SaveAs(path);
              }
          }
  
          return new EmptyResult();
      }
  </code></pre>
  
  <p>The problem is that this method creates empty file (size 0 bytes). I guess this happens because we don't read input stream, we're only reading filename on the example.</p>
  
  <p>How to make this work?</p>
  
  <p><strong>Update 1 (posted js code):</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#Upload").click(function () {
              var formData = new FormData();
              var totalFiles = document.getElementById("FileUpload").files.length;
              for (var i = 0; i &lt; totalFiles; i++) {
                  var file = document.getElementById("FileUpload").files[i];
  
                  formData.append("FileUpload", file);
              }
              $.ajax({
                  type: "POST",
                  url: '/Home/Upload',
                  data: formData,
                  dataType: 'json',
                  contentType: false,
                  processData: false,
                  //beforeSend: beforeSendHandler,
                  success: function(){
                      alert("CAT");
                  },
                  //error: errorHandler,
                  // Form data
                  data: formData,
                  //Options to tell jQuery not to process data or worry about content-type.
                  cache: false,
                  contentType: false,
                  processData: false
              });
              ajaxRequest.done(function () {
                  alert("CAAT");
              });
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Update 2 (added html-markup):</strong></p>
  
  <pre><code>&lt;div class="container body-content"&gt;
          &lt;hr /&gt;
          &lt;input type="file" id="FileUpload" multiple /&gt;
          &lt;input type="button" id="Upload" value="Upload" /&gt;
          &lt;hr /&gt;
          &lt;footer&gt;
         ...
          &lt;/footer&gt;
      &lt;/div&gt;
  </code></pre>