Validating File using React-Hook-Form and Yup ( 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)

score 9 · Accepted Answer · answered Feb 19 '22 at 23:25

9

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

answered Feb 19 '22 at 23:25

Nemanja

3,295
11
15

1

I think you need to include yup here: `file: yup.mixed()` otherwise mixed() is undefined.. – Matt Jan 11 '23 at 18:39
Im allways getting File as undefined – STEEL Mar 03 '23 at 03:36

score 0 · Answer 2 · answered Aug 26 '22 at 11:38

This is another solution for the new version 7

 const fileSchema = yup.object().shape({
     file: yup.mixed().test("file", "You need to provide a file", (value) => {
       if (value.length > 0) {  
         return true;
       }
       return false;
       }),
   });

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

2 Answers2