I am trying to allow a user to submit an image and a title for that image that gets sent to my backend API. I want a user to not be able to submit to that API if the title input box is empty. So I figured I need to implement a form validation for this. But for some reason, it is not working. Can someone help me figure out what I need to do to get it working so that the error displays when the title input is empty? I have a sandbox also if that helps. https://codesandbox.io/s/peaceful-frog-ui4413?file=/src/App.js
Upload.jsx:
import '../../components/pages/styles/Uploads.css';
import {Formik, Field, Form, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import {useEffect, useState} from 'react';
import {} from 'react-router-dom';
import {useDispatch, useSelector} from 'react-redux';
import axios from 'axios';
import {clearMessage} from '../../slices/messages';
import authHeader from '../../services/auth-header';
const API_URL = 'http://localhost:8080/posts';
function Uploads() {
const {user: currentUser} = useSelector((state) => state.auth);
const [file, setFile] = useState();
const [title, setTitle] = useState();
const [description, setDescription] = useState('');
const [loading, setLoading] = useState(false);
const [content, setContent] = useState('');
const [preview, setPreview] = useState(null);
const initialValues = {
title: '',
};
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState();
useEffect(() => {}, []);
const validate = (values) => {
const errors = {};
if (!values.title) {
errors.title = 'Title of Post is required!';
}
return errors;
};
const handleChange = (e) => {
const {name, value} = e.target;
setFormValues({...formValues, [name]: value});
};
const handlePost = (formValue) => {};
const onAddImage = (file) => {
window.URL.revokeObjectURL(preview);
if (!file) return;
setPreview(window.URL.createObjectURL(file));
};
const postUserImage = async (event) => {
//This is the code that will get passed to my backend. I need the image and title to be added here somehow.
event.preventDefault();
const formData = new FormData();
formData.append('file', file);
formData.append('title', formValues.title);
const result = await axios.post('/post/upload', formData, {
headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
});
console.log(result.data);
setFormErrors(validate(formValues));
};
return (
<div className='page'>
<div className='upload-card'>
<div id='preview'>
<img
src={preview || require('../../assets/user-solid.jpeg')}
id='image'
alt='Thumbnail'
className='user-post'
/>
</div>
</div>
<div className='upload-container'>
<div className='post-form-container'>
<p id='upload-form-label'>Hello, feel free to post an image!</p>
<form
// onSubmit={'return Validate(this);'}
onSubmit={postUserImage}
className='upload-form'
>
<div className='panel'>
<div className='button_outer'>
<div className='btn_upload'>
<input
filename={file}
onChange={(e) => onAddImage(e.target.files[0])}
type='file'
accept='.jpeg,.svg,.gif,.png'
id='image-selection-btn'
></input>
Choose your Art
</div>
</div>
</div>
<input
type='text'
className='form-control'
placeholder='Enter Title'
id='cred-input'
value={formValues.title}
onChange={handleChange}
initialValues={initialValues}
/>
<button type='submit' id='post-upload-btn'>
Upload Image
</button>
</form>
</div>
</div>
</div>
);
}
export default Uploads;