This is how I have my controller test, just to show what request structure works:
post(
:create,
params: {
play_session: {
comment: "COMMENT",
time_in_minutes: 10,
video: fixture_file_upload("video.webm")
}
}
)
I am trying to reach this endpoint from JS with this:
async function uploadFile(blob) {
let play_session = { comment: "SUPER GOOD COMMENT", time_in_minutes: 23, video: blob };
let formData = new FormData();
formData.append("play_session", play_session);
try {
let response =
await fetch(
"http://localhost:3000/front/play_sessions",
{
method: "POST",
body: formData
}
);
console.log("HTTP response:", response);
} catch(e) {
console.log("Huston we have problem...:", e);
}
}
But I get this error in the Rails console:
Started POST "/front/play_sessions" for ::1 at 2021-09-24 22:00:30 +0200
Processing by Front::PlaySessionsController#create as */*
Parameters: {"play_session"=>"[object Object]"}
Completed 500 Internal Server Error in 3ms (Allocations: 1717)
NoMethodError (undefined method `permit' for "[object Object]":String):
I have tried to add headers to the fetch call like this:
await fetch(
"http://localhost:3000/front/play_sessions",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "multipart/form-data"
},
body: formData
}
);
Then I have this error in the Rails console:
Started POST "/front/play_sessions" for ::1 at 2021-09-24 22:02:59 +0200
Processing by Front::PlaySessionsController#create as JSON
Parameters: {"------WebKitFormBoundaryESNX0mluVZ8VIiry\r\nContent-Disposition: form-data; name"=>"\"play_session\"\r\n\r\n[object Object]\r\n------WebKitFormBoundaryESNX0mluVZ8VIiry--\r\n"}
Completed 400 Bad Request in 1ms (Allocations: 520)
ActionController::ParameterMissing (param is missing or the value is empty: play_session
Did you mean? ------WebKitFormBoundaryESNX0mluVZ8VIiry
Content-Disposition: form-data; name
action
controller):
FormData's append accepts name, value pairs where the value can be either a string or a Blob.
value
The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.
Here, formData.append("play_session", play_session) you assign an Object.
Because Rails is smart to create Hashes & Arrays in params, you need to append the parameters from play_session one by one:
let formData = new FormData();
formData.append('play_session[comment]', 'SUPER GOOD COMMENT')
formData.append('play_session[time_in_minutes]', 23)
formData.append('play_session[video]', blob)
For nested attributes you should do:
formData.append('play_session[user_attributes][name]', 'Jack');
For Arrays:
formData.append('play_session[user_ids][]', "1");
formData.append('play_session[user_ids][]', "2");