Rails active storage, Unpermitted parameter

Question

I am using Rails API and Vue for front-end. I am trying to let users upload their avatar using Active Storage. However, Rails complains that the avatar parameter is not allowed.

On the front-end I have a simple input

<input id="avatar" type="file" @change="onImageChange" />

Which, when changed triggers

onImageChange(event) {
  this.avatar = event.target.files[0];
}

Then, on submit

submit() {
      const formData = new FormData();
      formData.append("avatar", this.avatar);
      this.axios
        .put("/api/signup", {
          ...
          user: {
            ...
            avatar: formData
          }
        })

We receive the request in the RegistrationsController#update. We include the avatar in the white list

  def account_update_params
    params.require(:user).permit(:avatar, ...)
  end

And the model user has_one_attached :avatar.

However, on submit, I get

Parameters: {"headers"=>{...}, "user"=>{..., "avatar"=>{}}}

Unpermitted parameter: :avatar

I have also tried to white list it using .permit!(:avatar) and got the same result. Any idea what might be the problem? Thank you!

Ratnam Yadav Ratnam Yadav · Accepted Answer · 2019-03-02T21:14:53

I see avatar as json and not an temp file object. Suppose that json is as follows: Parameters: {"headers"=>{...}, "user"=>{..., "avatar"=>{ "name" => "test.png", "file": <# Temp File Obj>}}}

Then we will use statement

params.require(:user).permit(..., avatar: [:name, :file])

Rails active storage, Unpermitted parameter

1 Answers