React(TypeScript)、Formik、Rails API、ActiveStorage、で画像投稿機能を作成したい。

Question

React(TypeScript)、Formik、Rails API、ActiveStorage、で画像投稿機能を作成したい。

React(TypeScript)、Formik、Rails API、ActiveStorage、で画像投稿機能を作成したいのですが、うまく行かずに困っております。

発生している問題・エラーメッセージ

ActiveSupport::MessageVerifier::InvalidSignature (ActiveSupport::MessageVerifier::InvalidSignature):

どんなデータをサーバーサイドに送っているのか確認したところ

data:image/gif;base64,R0lGODlhigJVAfcAAKi7yO309RUj…ol7Gk2dhNkgZOqxEb/WIQwqVpZneO4EehDbqg8FQqAQEAOw=="

このようになっていました。

該当のソースコード

import React, {
  ChangeEvent,
  createRef,
} from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { Field, Form, Formik } from "formik";
import { TextField } from "formik-material-ui";
import {
  Button,
  Grid,
  LinearProgress,
} from "@material-ui/core";
import CancelTwoToneIcon from '@material-ui/icons/CancelTwoTone';

export default function PostNewForm(props: any) {

  const classes = useStyles();
  const [src, setSrc] = React.useState('')
  const ref = createRef<HTMLInputElement>()
  const [state, setState] = React.useState({
    status: true,
  });

//プレビュー処理
  const onClick = () => {
    if (ref.current) {
      ref.current.click()
    }
  }
  const onChange = (event: ChangeEvent<HTMLInputElement>, setFieldValue: any) => {
    if (event.target.files === null) {
      return
    }
    const file = event.target.files.item(0)
    if (file === null) {
      return
    }
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      setSrc(reader.result as string)
    }
  }
	return (
		<React.Fragment>
			<Card className={classes.root}>
        <CardContent>
          {src &&
            <React.Fragment>
              <img src={src} style={{width: '100%'}}/>
            </React.Fragment> 
          }
          <Formik
            onSubmit={async value => {
              try {
                const post ={
                  image: src,
                  user_id: props.user.id
                }
                await
                 axios.post('http://localhost:3000/api/v1/posts',{post: post} 
                console.log(post);
              } catch (error) {
                alert(error.message);
              }
            }}
            render={({ submitForm, isSubmitting, isValid, setFieldValue}) => (
              <Form>
                <Grid container className={classes.root} spacing={2}>
                {isSubmitting && <LinearProgress />}
                  <Grid item xs={12}>
                    <Field 
                      name="image"
                      accept="image" 
                      type="file"
                      onChange={(event: ChangeEvent<HTMLInputElement>) => onChange(event,setFieldValue)}
                      onClick={onClick}
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Button
                      type="submit"
                      disabled={!isValid || isSubmitting}
                    >
                      投稿
                    </Button>
                  </Grid>
                </Grid>
              </Form>
            )}
          />
        </CardContent>   
			</Card>
		</React.Fragment>
	);
}

#post model
class Post < ApplicationRecord
  belongs_to :user
  has_one_attached :image
end

  def create
    post = Post.new(post_params)
    if post.save
      render json: post
    else
      render json: post.errors
    end
  end

  private

  def post_params
    params.require(:post).permit(:user_id, :image)
  end
  

試したこと

 const post ={
    image: src,
 }

を

 const post ={
    image: value.image,
 }

にしてみた。

補足情報（FW/ツールのバージョンなど）

ruby '2.6.5'
gem 'rails', '~> 6.0.3', '>= 6.0.3.2'

分かる方いらっしゃいましたらよろしくお願いいたします。

Answer 1

let img = new Image();
img.src = URL.createObjectURL(event.target.files[0]);

この辺を追記して解決