override formik.onChange with custom onChange method in reactjs

Question

I'm trying to get the value of a file input so that I can make a custom file input. But when I try to pass the value using onChange prop the value is not passing to the handleChange function I'm calling. I'm also using formik and Yup for form validation and I think when I call onChange prop its invoking the formik.onChange instead of the custom handleChange function that I wrote. So my question is how do I add my custom function to formik.onChange function. I also tried to put handleChange function with in useFormik, but didnt work. Here is my code below.

    import React, { useState } from "react";
  
    
    import { Button, Card, Form, Modal, Row, Col } from "react-bootstrap";
    
    import { useFormik } from "formik";
    import * as Yup from "yup";
    
    import "../assets/css/uploadContent.css";
    

    
    let validationSchema = Yup.object().shape({
      inputFile: Yup.mixed().required("Required"),
      
      contentTitle: Yup.string().required("Content title is required"),
    
      medias: Yup.string().required("Required"),
   
      description: Yup.string().required("Required"),
    
      thumbnail: Yup.mixed()
        .required("Required"),
    });
    
    function UploadContents({ handleUpload }) {
      const [selectedFile, setSelectedFile] = useState(null);
     
    
      console.log("Files", selectedFile);
    
      const handleChange = (e) => {
    setSelectedFile(e.target.files[0]);
    console.log("Files selected are", selectedFile);
  };
    
      const formik = useFormik({
        initialValues: {
          inputFile: "",
          contentTitle: "",
        },
    
        validationSchema: validationSchema,
    
   // handleChange: (e) => {
    //   setSelectedFile(e.target.files[0]);
    //   console.log("This is the formik onchange", selectedFile);
    // },
        onSubmit: (values) => {
          console.log("Values are", values);
        },
      });
    
      return (
        <div>  
            <Form onSubmit={formik.handleSubmit}>
               <Card className="w-100 p-5 text-center file-card">
              <Form.File id="formcheck-api-regular" custom>
              <Form.File.Input
                  type="file"
                  name="inputFile"
                  onChange={formik.handleChange}
                  {...formik.getFieldProps("inputFile")}
                />
              <Form.Label id="file-label">
                <i className="fa fa-cloud-upload" />
                Upload Contents
              </Form.Label>
              {selectedFile && selectedFile ? (
                <div className="file-preview">{selectedFile}</div>
              ) : null}
              </Form.File>
              <div className="errors">
                {formik.touched.inputFile && formik.errors.inputFile ? (
                  <div>{formik.errors.inputFile}</div>
                ) : null}
              </div>
            </Card>
    
                <Form.Group className="mt-2">
                  <Form.Control
                    size="md"
                    type="text"
                    id="formGroupExampleInput"
                    placeholder="Enter content title"
                    name="contentTitle"
                    {...formik.getFieldProps("contentTitle")}
                  />
                  <div className="errors">
                    {formik.touched.contentTitle && formik.errors.contentTitle ? (
                      <div>{formik.errors.contentTitle}</div>
                    ) : null}
                  </div>
                </Form.Group>            
            </Form>
        </div>
      );
    }
    
    export default UploadContents;

Answer 1

I had same issue This worked for me

Use the setFieldValue method Set the initial value of the input to null as it may throw an error

Then your onChange handler onChange={ev=>{ formik.setFieldValue("inputFile",ev.target.files[0]) }}

Answer 2

You can use custom function like that :

onChange={(e) => {
   console.log("field value change");
   formik.handleChange(e);
 }}