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):

CodePudding user response：

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");