React Formik Issue: Unable to Edit Text Fields After Uploading an Image (Error 500 Internal Server Error)

18 Views Asked by At

I'm facing an issue while working with a React form using Formik. The form includes text fields and an image field. The problem is as follows:

When there is no image uploaded, I can edit the text fields and successfully save the changes.

However, once I upload an image, I'm unable to edit the text fields. The changes are not saved, and I receive a 500 Internal Server Error in my application.

Important Note: This problem occurs only when I send requests through the interface of my application. If I use Postman to send requests, everything works correctly.

The only way to be able to edit the text fields again is by modifying the image along with the text field and then saving the changes, or by deleting the image from Postman and then attempting to edit the text fields.

Below, I include a snippet of my relevant code:

  const initialValues = {
    project_name: project?.project_name,
    logo: project?.logo,
    description: project?.description,
    start_date: project?.start_date,
    due_date: project?.due_date,
    email_notification: true,
    phone_notification: false,
    notification: true,
  } as InitialValuesProps;

  const formik = useFormik({
    initialValues: initialValues,
    validationSchema: Yup.object({
      project_name: Yup.string()
        .required("Project name is required ")
        .min(10, "Min 10 characters"),
      description: Yup string()
        .required("Description is required")
        .min(10, "Min 10 characters"),
      start_date: Yup.string().required("Start date is required"),
      due_date: Yup.string().required("Due date is required"),
      email_notification: Yup boolean(),
      phone_notification: Yup boolean(),
      notification: Yup.boolean(),
    }),
    onSubmit: async (values) => {
      console.log(values);
      if (formik.isValid) {
        try {
          if(project?.id){
            await editProject(project.id.toString(), values);
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
  });

I'm looking for a solution to be able to edit the text fields without any issues, regardless of whether an image is uploaded or not.

0

There are 0 best solutions below