I am facing an issue in my Next.js application where I am attempting to validate the upload of an image using Formik and Yup by passing a method called handleOnImageChange in the component. However, I am struggling to make it work this way. I have also tried using useFormikContext but to no avail. Can someone provide assistance?
const validationSchema = yup.object().shape({
file: yup.mixed().required('Please upload an image')
});
function handleOnImageChange(event) {
const file = event.currentTarget.files[0];
uploadImage(file);
}
<Formik
onSubmit={handleSubmit}
initialValues={defaultFormState}
validationSchema={validationSchema}
>
{() => (
<>
<div>
<Uploader imageSrc={imageSrc} handleOnImageChange={handleOnImageChange} />
<ErrorMessage
name="file"
component={InputError}
/>
</div>
</>
)}
</Formik>
Using the uploader component:
const Uploader = ({handleOnImageChange, imageSrc}) => {
return (
<>
<input id="file" accept=".jpg, .jpeg, .png, .gif, .webp" name="file" type="file" onChange={handleOnImageChange} />
{imageSrc && (
<img src={imageSrc} width="200"/>
)}
</>
)
}