Home>
I want to create an image posting function with React (TypeScript), Formik, Rails API, ActiveStorage.
I'd like to create an image posting function with React (TypeScript), Formik, Rails API, ActiveStorage, but I'm having trouble with it.
ActiveSupport :: MessageVerifier :: InvalidSignature (ActiveSupport :: MessageVerifier :: InvalidSignature):
I checked what kind of data was sent to the server side
data: image/gif;base64, R0lGODlhigJVAfcAAKi7yO309RUj… ol7Gk2dhNkgZOqxEb/WIQwqVpZneO4EehDbqg8FQqAQEAOw =="
It was like this.
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,
});
// Preview process
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> </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}> Post
</Button> </Grid> </Grid> </Form> )}
/> </CardContent> </Card> </React.Fragment> );
}
#post model
class Post</pre>
<pre><code data-language = "rails">def create
post = Post.new (post_params)
if post.save
render json: post
else else
render json: post.errors
end
end
private
def post_params
params.require (: post) .permit (: user_id,: image)
end
What I tried
const post = {
image: src,
}
To
const post = {
image: value.image,
}
I tried it.
ruby '2.6.5'
gem'rails','~>6.0.3','>= 6.0.3.2'
I would appreciate it if anyone could understand.
-
Answer # 1
Related articles
- ruby on rails - i want to create a like function with rails
- ruby on rails - comment posting function actioncontroller :: urlgenerationerror
- ruby - [rails] i want to create a link including the data attribute with the link_to helper
- ruby on rails - when calling the create action, the name attribute changes depending on whether it is indexhtmlerb or newhtmlerb
- ruby on rails - i want to implement a login function using devise
- ruby - i can't create a custom account with rails stripe
- ruby - post photo&like function on rails self-introduction page
- ruby on rails - create a chat feature with action cable on ec2 on rails aws
- ruby on rails - i can't implement the rails like function
- ruby - rails comment function display
- ruby on rails 6 - [rails]'unfollow' function does not work * no error message
- ruby on rails - [rails] chat function is being implemented jserb file cannot be read
- ruby on rails - [rails] i want to implement a filtering function and display the corresponding items on the list screen
- ruby on rails - creating an image posting application where the data entered in the form is not saved
- ruby on rails 5 - some items are not saved in db when posting from rails form
- ruby on rails - i get an error with rails db: create
- [ruby on rails 6] i implemented the tag function using acts-as-taggable-on, but i can't jump to the linked article from the list
- ruby on rails - i cannot save a comment on the comment posting page
- ruby on rails 5 - rails: create an administrator screen using activeadmin colors of other pages change
Related questions
- javascript - image acquisition by axios in rails api mode
- api - about re-rendering by setstate in the asynchronous function of functionalcomponent
- i want to know an efficient way to call api in react
- ruby on rails - [rails] routing error occurs in devise_token_auth and the registration screen cannot be displayed
- ruby on rails - [rails] i want to pass json from controller to html (erb)
- javascript - i want to manage the checked state and unchecked state of multiple check boxes in react for each check box
- api - redux dispatch is a not function
- ruby on rails - i want to know how to return from rails api mode to non-api mode (normal rails)
- ruby - i can't get a payjp token on aws
let img = new Image ();
img.src = URL.createObjectURL (event.target.files [0]);
Add this area to solve