title: mvc3 file upload using ajax form - Request.Files empty
body: <p>Im using mvc3, and am trying to create a series of ajax forms that each upload a file, within a single page. Here's the view for the page:</p>
  
  <pre><code>@{
      ViewBag.Title = "Index";
  }
  &lt;h2&gt;
      Index&lt;/h2&gt;
  
      @Html.Partial("_UploadItem")
      @Html.Partial("_UploadItem")
      @Html.Partial("_UploadItem")
  
  &lt;script type="text/javascript"&gt;
      function Go() {
          // loop through form tags
          for (var n = 0; n &lt; document.forms.length; n++) {
              var f = document.forms[n];
              // if a dress is chosen, a caption is chosen
              // and a file is chosen, then submit the ajax form
              if (f.dressid.value != '' &amp;&amp;
                 f.dresscaption.value != '' &amp;&amp;
                 f.fileitem.value != '')
                  f.submit();
          }
      }
  &lt;/script&gt;
  &lt;input type="button" onclick="Go();"/&gt;
  </code></pre>
  
  <p>Then the Go() function loops through the ajax forms, checking to see whether all 3 pieces (dressid, dresscaption, and fileitem) on each form are non-empty, and calls submits the forms that do, kicking off an async upload.</p>
  
  <p>Here's the partial view:</p>
  
  <pre><code>@using SoRefeising.Models
  @using (Ajax.BeginForm("UploadFile", new { }, new AjaxOptions { HttpMethod = "POST" }, new { enctype="multipart/form-data"}))
  {
      List&lt;SelectListItem&gt; items = (List&lt;SelectListItem&gt;)ViewBag.Dresses;
  
      &lt;span&gt;Dress&lt;/span&gt;
      @Html.DropDownList("dressid", items, "Choose Dress");
      &lt;span&gt;Caption&lt;/span&gt;
      @Html.TextBox("dresscaption")
      &lt;input type="file" id="fileitem" /&gt;    
  }
  </code></pre>
  
  <p>I have marked each form with the multipart attribute. When the page is generated, I get the following:</p>
  
  <pre><code>&lt;form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form0" method="post"&gt;    &lt;span&gt;Dress&lt;/span&gt;
  &lt;select id="dressid" name="dressid"&gt;&lt;option value=""&gt;Choose Dress&lt;/option&gt;
  &lt;option value="1"&gt;Simpson01&lt;/option&gt;
  &lt;option value="2"&gt;Simpson02&lt;/option&gt;
  &lt;/select&gt;    &lt;span&gt;Caption&lt;/span&gt;
  &lt;input id="dresscaption" name="dresscaption" type="text" value="" /&gt;    &lt;input type="file" id="fileitem" /&gt;    
  &lt;/form&gt;
  
      &lt;form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form1" method="post"&gt;    &lt;span&gt;Dress&lt;/span&gt;
  &lt;select id="dressid" name="dressid"&gt;&lt;option value=""&gt;Choose Dress&lt;/option&gt;
  &lt;option value="1"&gt;Simpson01&lt;/option&gt;
  &lt;option value="2"&gt;Simpson02&lt;/option&gt;
  &lt;/select&gt;    &lt;span&gt;Caption&lt;/span&gt;
  &lt;input id="dresscaption" name="dresscaption" type="text" value="" /&gt;    &lt;input type="file" id="fileitem" /&gt;    
  &lt;/form&gt;
  
      &lt;form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form2" method="post"&gt;    &lt;span&gt;Dress&lt;/span&gt;
  &lt;select id="dressid" name="dressid"&gt;&lt;option value=""&gt;Choose Dress&lt;/option&gt;
  &lt;option value="1"&gt;Simpson01&lt;/option&gt;
  &lt;option value="2"&gt;Simpson02&lt;/option&gt;
  &lt;/select&gt;    &lt;span&gt;Caption&lt;/span&gt;
  &lt;input id="dresscaption" name="dresscaption" type="text" value="" /&gt;    &lt;input type="file" id="fileitem" /&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p>Everything looks ok...</p>
  
  <p>Here's the controller action that is called</p>
  
  <pre><code>[HttpPost]
          public ActionResult UploadFile(string dressid, string dresscaption)
          {
                  HttpPostedFileBase hpf = Request.Files[0] as HttpPostedFileBase;
  ...
  </code></pre>
  
  <p>When the action is called, the Request.Files collection has 0 items, rather than the selected file. I have enabled unobtrusive javascript, the unobtrusive file is loaded in the master page, and works on other pages. </p>
  
  <p>Ive seen some messages on the forum about being careful with file sizes. The file I am testing with is &lt; 2k</p>
  
  <p>Any ideas why there are no items in Request.Files?</p>
  
  <p>Thanks</p>