title: How do I handle HTML5 Multiple File uploads in ASP.NET MVC?
body: <p>I found the <a href="https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery/8758614#8758614">following great thread</a> with an explanation of how to do file uploads through AJAX/Jquery using the new HTML5 FormData API </p>
  
  <p>Here's a slightly updated version of that code, with the newer JQuery 1.8+ syntax</p>
  
  <pre><code>$(':button').click(function(){
      var formData = new FormData($('form')[0]);
      $.ajax({
          url: '/Upload',  //my ASP.NET MVC method
          type: 'POST',
          // handle the progress report
          xhr: function() {  // Custom XMLHttpRequest
              var myXhr = $.ajaxSettings.xhr();
              if(myXhr.upload){ // Check if upload property exists
                  myXhr.upload.addEventListener('progress',progressHandlingFunction,    false); // For handling the progress of the upload
              }
              return myXhr;
          },
  
          // Form data
          data: formData,
  
          //Options to tell jQuery not to process data or worry about content-type.
          cache: false,
          contentType: false,
          processData: false
      })
      .done(function(){
          alert("success");
      })
      .fail(function(){
          alert("error");
      });
  });
  
  function progressHandlingFunction(e){
      if(e.lengthComputable){
          $('progress').attr({value:e.loaded,max:e.total});
      }
  }
  </code></pre>
  
  <p>and here's the form</p>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;
      &lt;input name="file" type="file" /&gt;
      &lt;input type="button" value="Upload" /&gt;
  &lt;/form&gt;
  &lt;progress&gt;&lt;/progress&gt;
  </code></pre>
  
  <p>On the server side, we have something like this. </p>
  
  <pre><code>[HttpPost]
  public string Upload(HttpPostedFileBase file)
  {
      // do something with file
      return "you uploaded a file called " + file.FileName;
  }
  </code></pre>
  
  <p>This works great. UNTIL you decide to use the "multiple" attribute on the file dialog, and send multiple files. </p>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;
      &lt;input name="file" type="file" multiple="multiple" /&gt;
      &lt;input type="button" value="Upload" /&gt;
  &lt;/form&gt;
  &lt;progress&gt;&lt;/progress&gt;
  </code></pre>
  
  <p>You'll find various pages online suggesting the following solutions</p>
  
  <pre><code>public string Upload(IEnumerable&lt;HttpPostedFileBase&gt; files)
  {
      foreach(var file in files)
           ...
  }
  </code></pre>
  
  <p>Oops. Doesn't work</p>
  
  <pre><code>public string Upload(List&lt;HttpPostedFileBase&gt; files)
  {
      foreach(var file in files)
           ...
  }
  </code></pre>
  
  <p>Nope. Doesn't work. </p>
  
  <pre><code>public string Upload(IEnumerable files)
  {
      foreach(var file in files)
           ...
  }
  </code></pre>
  
  <p>Doesn't even <em>compile</em></p>
  
  <pre><code>public string Upload(HttpPostedFileBase[] files)
  {
      foreach(HttpPostedFileBase file in files)
           ...
  }
  </code></pre>
  
  <p>Guess what? Doesn't work. Lets try dealing with Request.Files instead. Good old reliable Request.Files. Never fails. </p>
  
  <pre><code>public string Upload()
  {
      foreach (HttpPostedFileBase uf in Request.Files)
           ...
  }
  </code></pre>
  
  <p>Spoiler alert: It Doesn't work. </p>
  
  <p>Aha. Got it! I'll iterate over the keys in Request.Files instead. </p>
  
  <pre><code>public string Upload()
  {
      foreach(var key in Request.Files.AllKeys)
      {
          var file = Request.Files[key];
      }
  }
  </code></pre>
  
  <p>Yet again, it doesn't work. </p>