Активное хранилище и загрузка изображений из React

Question

У меня возникают проблемы с созданием почтового запроса из React при включении файла. Я попытался переключить сильные параметры на несильные параметры, исключив.require (:user). Сделав это, я смог создать почтовый запрос, но изображение не вернулось с URL-адресом на моем локальном хосте:3000/users. Без файла почтовый запрос работает нормально. С его помощью и сильными параметрами я получаю ошибку 400 неверного запроса сparam is missing or the value is empty: user ценность.

Мой код в запросе на выборку:

import React from 'react'
import {connect} from 'react-redux'
import {fetchUser} from '../actions'
import WelcomePage from './WelcomePage'

class Signup extends React.Component{

    state = {
        user: {
            username: '',
            password: '',
            pro_pic: null,
            currentUser: false
        }    
    }

    handleChange = e => {
        this.setState({user: {
            ...this.state.user,
            [e.target.name]: e.target.value
        }})
    }

    onImageChange = event => { 
        this.setState({user: {
            ...this.state.user,
            pro_pic: event.target.files[0] }
        });
    };

    handleSubmit = e => {
        e.preventDefault()
        const formData = new FormData()
        formData.append('username', this.state.user.username);
        formData.append('password', this.state.user.password);
        formData.append('pro_pic', this.state.user.pro_pic);
        this.setState(previousState => {
            return {
                currentUser: !previousState.currentUser
            }
        })
        fetch('http://localhost:3000/users', {
            method: 'POST',
            body: ({user: formData})
            })
            .then(response => response.json())
            .then(console.log)
            .catch(error=>console.log(error))
    }

    render(){
        return(
            <div>
                {this.state.currentUser ? 
                    <WelcomePage/> 
                : 
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" name="username" placeholder="IGN or Username" value={this.state.username} onChange={this.handleChange}/>
                        <input type="password" name="password" placeholder="Create Password" value={this.state.password} onChange={this.handleChange}/>
                        <input type="file" accept="image/*" multiple={false} onChange={this.onImageChange} />
                        <input type="submit" value="Create Account"/>
                    </form>
                }
            </div>
        )
    }
}

export default connect(null, {fetchUser})(Signup)

Мой пользовательский контроллер выглядит так:

class UsersController < ApplicationController

    def index
        @users = User.all
        render json: @users
    end

    def show
        @user = User.find(params[:id])
        render json: @user
    end

    def create
        @user = User.create(user_params)
        if @user.valid?
            render json: @user
        end
    end

    private

    def user_params
        params.require(:user).permit(:username, :password, :pro_pic)
    end
end

Мой пользовательский сериализатор выглядит так:

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id, :username, :password, :pro_pic

  def featured_image
    if object.pro_pic.attached?
      {
        url: rails_blob_url(object.pro_pic)
      }
    end
  end
end

И я включил has_one_attached :pro_pic в моей модели пользователя.

Изменить: что происходит в localhost:3000/users, выглядит так:

{
"id": 3,
"username": "asdfsdf",
"password": "zJMFhbSz@DuB74N",
"pro_pic": {
"name": "pro_pic",
"record": {
"id": 3,
"username": "asdfsdf",
"password": "zJMFhbSz@DuB74N",
"created_at": "2020-08-28T14:54:28.845Z",
"updated_at": "2020-08-28T14:54:28.864Z"
}
}
},

Answer 1

Попробуйте с этим

<form onSubmit={this.handleSubmit} enctype="multipart/form-data">