Validating File using React-Hook-Form and Yup (<x> must be a `object` type, but the final value was: `null`)

Question

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)

Answer 1

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;
          })
      });