title: Ajax.BeginForm in MVC to upload files
body: <p>I was trying to use an example mentioned here <a href="https://stackoverflow.com/questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data/13522052#13522052">How to do a ASP.NET MVC Ajax form post with multipart/form-data?</a></p>
  
  <p>But I keep getting "fail" error message box</p>
  
  <p>Index.cshtml</p>
  
  <pre><code>&lt;script src="~/Scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
  &lt;h2&gt;Files Upload&lt;/h2&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
      $("#form0").submit(function(event) {
          var dataString;
          event.preventDefault();
          var action = $("#form0").attr("action");
          if ($("#form0").attr("enctype") == "multipart/form-data") {
              //this only works in some browsers.
              //purpose? to submit files over ajax. because screw iframes.
              //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
              dataString = new FormData($("#form0").get(0));
              contentType = false;
              processData = false;
          } else {
              // regular form, do your own thing if you need it
          }
          $.ajax({
              type: "POST",
              url: action,
              data: dataString,
              dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
              contentType: contentType,
              processData: processData,
              success: function(data) {
                  //BTW, data is one of the worst names you can make for a variable
  
              },
              error: function(jqXHR, textStatus, errorThrown) {
                  //do your own thing
                  alert("fail");
              }
          });
      }); //end .submit()
  });
  &lt;/script&gt;
  &lt;div id="uploadDiv"&gt;
  @Html.Action("Files", "Home")
  &lt;/div&gt;
  
  @using (Ajax.BeginForm("Files", "Home", new AjaxOptions { UpdateTargetId = "uploadDiv", HttpMethod = "Post" }, new { enctype = "multipart/form-data", @id="form0"}))
  {
  &lt;div&gt;
      &lt;div&gt;Upload new file:
          &lt;input type="file" name="file" /&gt;&lt;/div&gt;
      &lt;input type="submit" value="Save" /&gt;
  &lt;/div&gt;
  }
  &lt;br /&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public PartialViewResult Files(HttpPostedFileBase file)
      {
          IEnumerable&lt;string&gt; files;
          if ((file != null) &amp;&amp; (file.ContentLength &gt; 0))
          {
              string fileName = file.FileName;
              string saveLocation = @"D:\Files";
              string fullFilePath = Path.Combine(saveLocation, fileName);               
  
  
              try
              {
                  file.SaveAs(fullFilePath);
                  FileInfo fileInfo = new FileInfo(fullFilePath);
                  file.InputStream.Read(new byte[fileInfo.Length], 0, file.ContentLength);                    
              }
              catch (Exception e)
              {
                  TempData["FileUpload"] = e.Message;
                  return PartialView();
              }
              files = Directory.GetFiles(@"D:\Files\");
              return PartialView(files);
          }
          else
          {
              files = Directory.GetFiles(@"D:\Files\");
              return PartialView(files);
          }
      }
  </code></pre>
  
  <p>Files.cshtml</p>
  
  <pre><code>@model IEnumerable&lt;string&gt;
  
  @foreach (string f in Model)
  {
  &lt;p&gt;@f&lt;/p&gt;
  }
  </code></pre>
  
  <p>Global.asax</p>
  
  <pre><code>ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
  </code></pre>