Submitting a form to a Rails server from jQuery using AJAX isn't working in IE11

Question

I'm trying to upload some data from a from to a Rails server using AJAX. The form contains two text inputs and one file input. Here's what my submit event handler looks like:

$("form").on("submit", function(event) {

  event.preventDefault();

  $.ajax({
    url: $(this).attr("action"),
    type: $(this).attr("method"),
    data: new FormData(this),
    contentType: false,
    processData: false
  });
});

This works fine in every browser except IE. When I try to submit the form in IE, my Rails server spits out the following error:

Unexpected error while processing request: bad content body
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:117:in `get_current_head_and_filename_and_content_type_and_name_and_body'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:19:in `block in parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `loop'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart.rb:25:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:377:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:203:in `POST'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:26:in `method_override'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:14:in `call'
        ...

I'd appreciate any insights into why this might not be working.

Answer 1

Is there a <script> tag in the new content? If so, try it without that bit. I've seen some versions of ie have troube with js updates containing that tag...

Answer 2

This might be a bug with IE10/11's serializing of form data. According to a blog post, those versions of IE corrupt the request when the last checkable input is not checked.

[1] http://blog.yorkxin.org/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11

Answer 3

You can add a csrf token before making a AJAX call. something like

$(document).ready(function(){
  $("form").on("submit", function(event) {
    event.preventDefault();
    set_csrf_token();
    $.ajax({
      url: $(this).attr("action"),
      type: $(this).attr("method"),
      data: new FormData(this),
      contentType: false,
      processData: false
    });
  });

  function set_csrf_token() {
    // for  protectting from forgery and sending the x-csrf token
    $.ajaxSetup({
      beforeSend : function(xhr) {
        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      }
    });  
  }
}); 

I assume you are uploading a file using the form . Using jQuery file upload it submit the form using a hidden iframe. some time IE change the file content type like .jpeg will be .pjpeg that also may can the issue.

Answer 4

Instead of using FormData, I used the jQuery Form Plugin, which fixed the problem.

$("form").on("submit", function(event) {
  event.preventDefault();
  $(this).ajaxSubmit();
});