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.

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.

• javascript
• jquery
• ruby-on-rails
• ajax
• paperclip

Share Improve this question Follow edited Apr 7, 2014 at 6:08 LandonSchropp asked Apr 4, 2014 at 22:07 LandonSchroppLandonSchropp 10.3k2626 gold badges8989 silver badges160160 bronze badges 12

• 1 Have you tried setting the contentType? – Senjai Commented Apr 4, 2014 at 22:18
• I've tried removing contentType: false and I've tried explicitly setting it to "application/x-www-form-urlencoded". Neither worked. – LandonSchropp Commented Apr 4, 2014 at 23:28
• did you use enctype='multipart/form-data' in your form? If you are uploading any file, how contentType can be "application/x-www-form-urlencoded". It should be 'multipart/form-data', right? – Rajesh Omanakuttan Commented Apr 5, 2014 at 1:36
• Unfortunately, that didn't do the trick either. – LandonSchropp Commented Apr 5, 2014 at 3:49
• What data does new FormData(@_element.find("form").get(0)) provide? – Richard Peck Commented Apr 5, 2014 at 10:51

 |  Show 7 more ments

4 Answers 4

Sorted by: Reset to default 5

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/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11

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...

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.

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

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