Rails and FormData

Rails와FormData에 관한 기사입니다.영어와 일본어로 모두 씁니다.
This post talks about using WebAPI's FormData with Rails.
최근Rails의 Form부터 API 기반 시스템으로 교체되었습니다.폼과 백엔드를 XHR의 요청axios으로 대체해 협업했다는 것이다.
We recently migrated from using Rails forms to an API based app where data is sent to the backend using XHR requests (in our case, using axios ).
이 글은 전형적인 사용자 모델을 사용한다.
For the following example I will be using a generic User model.

문제/ Problem

Rails Form·Using Rails Form 사용

<%= form_for @user, url: {action: "create"} do |f| %>
  <%= f.text_field :name %> # "Yokoyama"
  <%= f.text_field :role %> # "Developer"
  <%= f.submit "Create" %>
<% end %>

Rails의 Form을 사용하는 경우 Controller에는 다음과 같은 params가 있습니다.
If we were using Rails forms then we'd normally get:

def create
 # params = <ActionController::Parameters
 # {
 #  "user" => {
 #    "name"=>"Yokoyama",
 #    "role"=>"Developer"
 #  },
 #  "controller"=>"...",
 #  "action"=>"create",
 # }
 # permitted: false>
  ...
end

FormData·Using FormData 사용

팟캐스트를 제작해서 사용했다FormData.
When packaging a body for a POST/PATCH request we used FormData .

const formData = new FormData();

formData.append('name','Yokoyama');
formData.append('role','Developer');

const url = 'user create link';
axios.post(url, formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...

Rails의 Controller에서 다음과 같은 응답이 있습니다.
On the Rails backend we get:

def create
 # params = <ActionController::Parameters
 # {
 #  "name"=>"Yokoyama",
 #  "role"=>"Developer",
 #  "controller"=>"...",
 #  "action"=>"create",
 # }
 # permitted: false>
  ...
end

관건:
- 속성이 최상위 수준에서 동명 문제가 발생할 수 있습니다.
리즈 모드 아니야.
As you can see:
- All attributes are scoped to the top level, which will cause issues if there are name conflicts
- It's also just against the typical Rails pattern

해결/ 솔루션

원래@jugtuttle on Medium가 쓴 해결 방안이었는데, 모델의 이름을 열쇠에 포함하면 성공한다.
@jugtuttle on Medium pointed out that you can simply use a key that has the model name. So in our case:

const formData = new FormData();

formData.append('user[name]','Yokoyama');
formData.append('user[role]','Developer');

axios.post('insert user path here', formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...

더욱 간단하도록:
To make it even easier:

// rails_form_data.js

class RailsFormData extends FormData {
  constructor(model) {
    super();
    this.model = model;
  }

  append(key, value) {
    super.append(`${this.model}[${key}]`, value);
  }
}

export default RailsFormData;

import RailsFormData from '...'

const formData = new RailsFormData('user');

formData.append('name','Yokoyama');
formData.append('role','Developer');

axios.post('insert user path here', formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...

결실

Rails의 controller에는 다음과 같은 상태가 있습니다.
Then on the Rails backend side you'll get:

def create
  #  params = <ActionController::Parameters
  #  {
  #    "user" => {
  #      "name"=>"Yokoyama",
  #      "role"=>"Developer"
  #    },
  #    "controller"=>"...",
  #    "action"=>"create",
  # }
  # permitted: false>
  ...
end