CODEWITHSUNDEEP
javascriptreactjs
Nigel
Nigel

Reputation: 1027

Issue with setting an image as a nested state in React

So I have a react frontend which is responsible for getting inputs to create a new user for my app. It hits the backend server when the user submits the form. In that form, I have a file input to allow a user to select an avatar. On the backend, I use rails active storage to handle saving that image to aws. The issue here is I want to save the image as a nested prop under the user state. So given the constructor method of the UserForm Component;

enter image description here

I have a few text inputs for the full name, email and password and a file input for the avatar. The idea is to grab all of that and send it as a formdata to the rails backend. I can then grab the entire user params and create a new user on the backend.

So here's my inputs: enter image description here

Here's my code when a user types into the text fields. It saves the inputs to the nested state of the User state:

enter image description here

The issue is when Im trying to attach the image and save it under User.avatar state.

enter image description here

When I do Console.log(file), I get this which is correct, it show the image:

enter image description here

But when I check state User.Avatar, it shows this. user.avatar is an empty object!
enter image description here

But if I just set the image directly on a top level state like this: enter image description here

The state for file is showing up fine: enter image description here

Any ideas why this is happening? Its so weird!

Edit 1

According to a solution below by Ilia, just send it to the backend. So assuming I send it to the backend with avatar saved under the user object in state. Here's my code which does that:

   submitUser = async () => {    
    let formData = new FormData();

    formData.set("user", JSON.stringify(this.state.user));    

    const res = await axios({
      method: 'post',
      url: '/users/',
      data: formData,
      headers: {
      'content-type': `multipart/form-data; boundary=${formData._boundary}`,
      },
    });

On my rails backend:

def create    
    @user = User.new(user_params)    

    if @user.save
      flash[:notice] = "Welcome #{@user.full_name}"
      render json: { status: true }
      session[:user_id] = @user.id     
    else
      flash[:error] = "Please fix the following error(s)"
      render json: { error: @user.errors.messages }
    end
  end

And my strogn params is handling the params (debugging code in here):

def user_params       
    json_params = ActionController::Parameters.new( JSON.parse(params[:user]) )
    binding.pry     
    res = json_params.require(:user).permit(:email, :full_name, :password)

    res
  end

My avatar is jsut an empty obj..

enter image description here

I'm not sure what you meant by making it as an image source?

Upvotes: 0

Views: 132

Answers (1)

iLiA
iLiA

Reputation: 3153

I have came across with the same issue before, the state actually is holding the file value but for unknown reason (for me) it does not shows, send that to backend and you will see that file is received correctly, you can as well set it as an image source to ensure that file is actually received!

Upvotes: 1

Related Questions