Post validation failed: Path '...' is required when using react-hooks-form

Question

I want to upload a form that enctype is multipart/formdata with react-hooks-form. req.body gets the formdata but req.data shows this error message: "Post validation failed: title: Path title is required., body: Path body is required." and form is not being posted. If I send the data like this axios({req.data: dataForm}} req.data shows this message "Post validation failed: postImg: Cast to string failed for value "{ '0': {} }" at path "postImg""

The reason why I use the react-hooks-form that upload image file to the server. If there is another solution without react-hooks-form I am open.

const AddPost = () => {    
    const { register, handleSubmit } = useForm();
    const onSubmit = async (dataForm) => {
        console.log(dataForm);
        try {
            const res = await axios({ method: 'POST', url: 'http://localhost:5000/posts/addpost', body: dataForm });
            console.log(res);
            //clearInput();
        } catch (err) {
            console.log(err);
        }
    }
    return (
        <>
        <Container>
                <Form /*action="/posts/addpost"*/ onSubmit={handleSubmit(onSubmit)} autoComplete="off" encType="multipart/form-data">
                    <Form.Group>
                        <Row>
                            <Col xs={12} className="text-center mt-2">
                                <Form.Label><h4>Add a Memory</h4></Form.Label>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <Form.Control {...register('title')} required placeholder="Type Title"></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <FontAwesomeIcon icon={faEdit} className="text-dark mx-1"></FontAwesomeIcon>
                                <Form.Label className="mx-1">Details of Memory</Form.Label>
                                <Form.Control {...register('body')} required placeholder="Details" as="textarea" rows={3}></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <FontAwesomeIcon icon={faTag} className="text-dark mx-1"></FontAwesomeIcon>
                                <Form.Label className="mx-1">Tags</Form.Label>
                                <Form.Control {...register('tags')} placeholder="#sunrise etc." required ></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <Form.Label className="label-file-upload" htmlFor="image-upload">Add Image</Form.Label>
                                <Form.File {...register('postImg')} id="image-upload" required  type="file" />
                            </Col>
                        </Row>
                    </Form.Group>
                    <div className="text-center">
                        <Button type="submit" className="bg-light text-dark border-light form-btn px-5 mb-5">Add Memory</Button>
                    </div>
                </Form>
        </Container>
        </>
    )
}

export default AddPost;

Answer 1

Use connect-multiparty, busboy etc. and also express-fileupload packages on the backend side. For example:

// index.js
import fileUpload from "express-fileupload";

app.use(fileUpload({createParentPath: true}));
app.use(cors());
app.use(express.json({ extended: true })); //bodyParser
app.use(express.urlencoded({extended: true })); //bodyParser

app.use('/posts', postsRoutes);

//post.js
import connectMultiparty from "connect-multiparty";
const multipartMiddleware = connectMultiparty();

router.post('/addpost', async(req, res) => {
  // create and save your data to database
}, multipartMiddleware);