Missing X-CSRF-Token Header on AJAX POST Request with File Upload

I’m trying to trace either some sort of conflict on my end (my app is rather complex, albeit not really JS-wise) or a bug in jquery-ujs which I have tentatively traced to the nonBlankFileInputs variable. (That is the bug seems to occur, if this if block is true: https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L477)

Basically, I have a form that sends correct AJAX requests (correct meaning including the X-CSRF-Token header) as long as, and only as long as, its file input field left empty. As soon as a file input field is selected the header is no longer sent (and I think the request is also no longer handled via AJAX).

Some quirky things about this form that may be contributing to this bug are

• I use the simple_form gem instead of the default form_for tags.
• The form itself is loaded by AJAX due to user input, so it isn’t present on the page at load time, in case that is causing some event not to bind to it.
• The form loads in a modal box javascript library (called bootbox) which has its own button design, so the way I ended up implementing the submit action is by placing a display: none submit button within the <form> tags and then triggering it with javascript from the bootbox code with $('div.bootbox div.bootbox-body').find('input[type=submit]').first().click();. This has worked perfectly so far though.

Any advice on how I can trace this problem further would be greatly appreciated.

[aguynamedben]

After reading this again very carefully, I see that @mvastola and mine’s proposed solution for jquery-ujs is the exact same. 👏 @mvastola

[mvastola]

Workaround

FYI, this doesn’t resolve this issue, but one workaround I’ve discovered is to include a javascript plugin that enables support for POST XHR requests with file inputs.

For example, if the following javascripts are required (in order):

• jquery
• jquery-ui
• jquery-ujs
• https://github.com/blueimp/jQuery-File-Upload

And then something the following code is run at page load:

$(document).on('ajax:aborted:file', 'form', function(event, nonBlankFileInputs) {
  $(this).fileupload();
  $(this).fileupload('send', {fileInput: nonBlankFileInputs});
  return false;
});

All POST requests marked as “remote” will be submitted via XHR requests, even if they have file inputs.