2

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!

Kristiyan Tsvetanov
  • 967
  • 12
  • 22

2 Answers2

1

I arrived here because I was getting the unpermitted parameter message with ActiveStorage when using multiple attachments.

Generic example

To ensure you permit multiple ActiveStorage attachments, change this

def post_params
  params.require(:post).permit(:title, :content, :files)
end

to this

def post_params
  params.require(:post).permit(:title, :content, files: [])
end

Further info in here

stevec
  • 41,291
  • 27
  • 223
  • 311
0

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])
Ratnam Yadav
  • 196
  • 3
  • 10