Posting form between 2 rails applications including files - ruby-on-rails

Question

I am trying to post a form from one rails app to another hosted on different domains and including files.
I attempted:
$(document).on("click", ".application-form .submission input", function(e){
e.preventDefault();
var form = $(".application-form form");
var data = new FormData(form);
var url = "http://example.com/action";
$.ajax({
url: url,
type: 'POST',
success: function(){
alert('success');
},
error: function(){
alert('error');
},
data: data,
cache: false,
contentType: false,
processData: false
});
});
But the remote server doesn't receive any data, params merely contains the controller name and action.
I also have tried using remotipart and setting up my form with form_for(#application, url: "http://example.com/action", html: {multipart: true}, remote: true) and if I include a file, the server receives [object Object] instead of correct param names and values. If I do not include a file, then the params are sent and received correctly, but I need to include files with the upload.
What is going on to cause [object Object] to replace all my form data when I include a file? Using remotipart 1.2.1. And I've seen this and it does not apply.

Answer 1

There are a lot of issues with attempting what you are:
Cross Domain Requests (CORS)
Form
Uploading
CORS
Your first issue is you have to ensure you're able to pass the data between the two domains. CORS is a standard protocol, whereby you can only send requests to pre-approved domains
Basically, you need some way to whitelist the possible connecting domains, and with Rails, you'll be best to use the RACK-CORS gem
I would begin by ensuring this is set up on your "receiving" domain
Form
Secondly, you need to compile the correct form data when you submit
I would use the .serialize() function:
$(document).on("click", ".application-form .submission input", function(e){
e.preventDefault();
var form = $(".application-form form");
var data = form.serialize();
var url = "http://example.com/action";
$.ajax({
url: url,
type: 'POST',
success: function(){
alert('success');
},
error: function(){
alert('error');
},
data: data,
cache: false,
contentType: false,
processData: false
});
});
This will probably explain the lack of params being sent to your other domain
Upload
Uploading files creates a totally new issue, as it takes a lot to get the file-upload process to work through ajax
There are plugins such as JQuery-FileUpload-Rails allow you to upload files through ajax. From my understanding, this works by providing custom middleware to handle the file upload over ajax. I'm not totally sure how it works, but I know it does, as we've used t multiple times

Answer 2

In general, you cannot directly upload files from a form via AJAX. You have to 'fake' it using either a hidden iframe, Flash, or something similar (might be different in the newest browsers). The jQuery Form plugin does a good job of simplifying this, and there are lots of other plugins as well to help with this.