Блог

У меня есть поле ввода (тип file), которое по какой-то причине проверяется, хотя и не требуется. С серийным номером у меня есть проверка, и она не требуется и, кажется, работает нормально, никаких ошибок при отправке пустого поля.. Для поля ввода файла я хочу, чтобы при загрузке файла проверялось только поле ввода. Что я делаю не так?, я получаю это (см. Изображение ниже), когда нажимаю отправить, чтобы проверить проверку.

вот мой код:

 const validationSchema = Yup.object({
    title: Yup.string()
      .required("Title is required")
      .min(8, "Title must be at least 8 characters")
      .max(100, "Title cannot be more than 100 characters"),
    description: Yup.string()
      .required("Description is required")
      .min(8, "Description must be at least 8 characters")
      .max(100, "Description cannot be more than 100 characters"),
    serialNumber: Yup.string()
      .min(4, "Serial number must be at least 4 characters")
      .max(16, "Serial number cannot be more than 16 characters"),
    productStatus: Yup.number().required("A Status is required"),
    productType: Yup.number().required("A type is required"),
    img: Yup.mixed()
      .test(
        "fileSize",
        "File size too large, max file size is 1 Mb",
        (file) => file amp;amp; file.size <= 1100000
      )
      .test(
        "fileType",
        "Incorrect file type",
        (file) =>
          file amp;amp; ["image/png", "image/jpg", "image/jpeg"].includes(file.type)
      ),
  });
 

 {formik.errors["img"] amp;amp; formik.touched["img"] amp;amp; (
                  <div style={{ color: "#B2484D", fontSize: ".8rem" }}>
                    {formik.errors.img}
                  </div>
                )}

           <Field name="img">
                  {() => {
                    // < - this will take fieldProps.. not used in this case, using formik instead
                    return (
                      <>
                        <input
                          onBlur={formik.handleBlur}
                          onChange={({ currentTarget }) => {
                            const file = currentTarget.files![0];
                            const reader = new FileReader();

                            if (file) {
                              reader.onloadend = () => {
                                setSelectedFile({
                                  file,
                                  previewURI: reader.result!,
                                });

                                setuploadbtnLabel(
                                  `You selected: ${file.name} - click again to change`
                                );
                              };
                              reader.readAsDataURL(file);
                              formik.setFieldValue("img", file);
                            }
                          }}
                          ref={inputFile}
                          type="file"
                          style={{ display: "none" }}
                          accept=".png,.jpg,.jpeg"
                        />
                      </>
                    );
                  }}
                </Field>
 

РЕДАКТИРОВАТЬ: вот codesandbox https://codesandbox.io/s/thirsty-chandrasekhar-34q1q?file=/src/App.js

Я думаю, вам следует попытаться добавить notRequired() или даже nullable() img добавить поле в определение схемы YUP. Из документов Yup:

Отметьте схему как необязательную. Передача undefined (или null для обнуляемой схемы) в качестве значения не приведет к сбою проверки.

Редактировать: на основе предоставленной вами изолированной среды я смог это выяснить. Проблема связана с добавленным вами тестом. В основном проблема заключается в том, что file не определено, когда файл не выбран, поэтому проверка всегда завершается неудачей.

Например, вы можете изменить это:

  .test(
    "fileSize",
    "File size too large, max file size is 1 Mb",
    (file) => file amp;amp; file.size <= 1100000
  )
 

Для этого:

 .test(
    "fileSize",
    "File size too large, max file size is 1 Mb",
    (file) => {
      if (file) {
        return file.size <= 1100000;
      } else {
        return true;
      }
    }
  )
 

notRequired() или nullable() даже не требуется, чтобы заставить его работать так, как вы ожидаете. Вот ссылка на изолированную среду с этим исправлением. Если это работает для вас, пожалуйста, отметьте ответ как принятый.

Удачи!