Validating File using React-Hook-Form and Yup (<x> must be a `object` type, but the final valu-CodePudding

I'm working on a simple file upload form using react-hook-form and I need to validate that a file has been selected for upload. Using yup for validation. I realize there are other questions on this topic but I was unable to find a working solution.

My file upload component is based (almost 100% the same) on this answer https://stackoverflow.com/a/68519175/1769106. It seems to be working just fine, if I disable validation the file is uploaded correctly.

The issue I'm facing is when validating whether a file has been selected I get the error file must be a 'object' type, but the final value was: 'null'.

Here's a CodeSandbox showing the problem. I added some prints showing the contents of the "file" form property and its type (which shows as object)

CodePudding user response：

Use schema validation below, it should work as expected.

 const fileFormSchema = yup.object().shape({
    file: mixed()
          .test("required", "You need to provide a file", (file) => {
            // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
            if (file) return true;
            return false;
          })
          .test("fileSize", "The file is too large", (file) => {
            //if u want to allow only certain file sizes
            return file && file.size <= 2000000;
          })
      });