CODEWITHSUNDEEP
reactjsreact-hook-formyup
user1769106
user1769106

Reputation: 318

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

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)

Upvotes: 7

Views: 13410

Answers (3)

gqstav
gqstav

Reputation: 2082

If you're using Typescript you'll need to set the type(s):

import { ObjectSchema, mixed, object } from 'yup';

export type Schema = {
  file: File;
};

export const schema: ObjectSchema<Schema> = object<Schema>().shape({
  file: mixed<File>()
    .test('required', 'You need to provide a file', (file) => {
      if (file) {
        return true;
      }
      return false;
    })
    .required(),
});

Upvotes: 0

Jhonatan MIzraim Ancona Herrer
Jhonatan MIzraim Ancona Herrer

Reputation: 11

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

Upvotes: 1

Nemanja
Nemanja

Reputation: 3669

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

Upvotes: 12

Related Questions