title: Uploading file via Jquery ui dialog and Ajax
body: <p>I am developing an ASP.NET MVC application, editing data is possible via 2 ways , opening in new tab and editing in a normal view or clicking on a link and editing in a dialog with Jquery-ui dialog. </p>
  
  <p>this is code form dialog</p>
  
  <pre><code>$dialog.dialog("option", "buttons", {
      "Save": function () {
          var dlg = $(this);
          $.ajax({
              url: $url,
              type: 'POST',
              data: $("#" + formName).serialize(),
              success: function (response, textStatus, xhr) {
                      $(target).html(response);
                      dlg.dialog('close');
                      dlg.empty();
                  }
              },
              error: function (xhr, status, error) {
                  ....
              }
          });
      },
      "Cancel": function () {
          $(this).dialog("close");
          $(this).empty();
      }
  
  });
  </code></pre>
  
  <p>My form is like this</p>
  
  <pre><code>@using (Html.BeginForm("Edit", "Patient", null, FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
  </code></pre>
  
  <p>Now I have a input-file on my form, but the file won't post to my form, I googled and get that there are problems with <code>AJAX</code> and File Upload, and they suggest using <code>jquery.form.js</code> but I don't know how to combine them, any idea?</p>
  
  <h2>Solution</h2>
  
  <p>I have changed my code as below and it works fine:</p>
  
  <pre><code>$dialog.dialog("option", "buttons", {
      "Save": function () {
          var dlg = $(this);
          var formData = new FormData($("#" + formName)[0]);
          $.ajax({
              url: $url,
              type: 'POST',
              data: formData,
              processData: false, 
              contentType: false,
  </code></pre>