Formik: How to validate formik & Yup validation with file type and size ?

[saurabh147sharma]

Hi

I couldn't find any doc for file upload validation in formik and yup. Please help me how to do that ?

[jaredpalmer]

Yup doesn’t handle this. You can use your own validation function at either the form or field-level.

[alecchisi]

After following this tutorial to integrate a file upload component in my form
https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc
I've been able to test file size and type like this:
iconFile: Yup.mixed() .test('fileSize', "File Size is too large", value => value.size <= FILE_SIZE) .test('fileType', "Unsupported File Format", value => SUPPORTED_FORMATS.includes(value.type) )

where FILE_SIZE is a numeric constant and SUPPORTED_FORMATS is an array of valid image type strings ['image/jpg', 'image/jpeg', 'image/gif', 'image/png']

[alecchisi]

Try this:
https://codesandbox.io/s/4wrrx8qok0

[Cuxs]

@alecchisi When I do

        yup.object().shape({
        file: yup.mixed().required('A file is required')
        .test('fileFormat', 'PDF only', (value) => {
          console.log(value); return value && ['application/pdf'].includes(value.type);
        }),

In my console only appears C:\fakepath\Filename.pdf not the file itself. My rendered input is

<input
    id="file"
    name="file"
    type="file"
    onChange={handleChange}
    className={
         errors.password && touched.password
         ? 'form-control is-invalid'
         : 'form-control'
     }
/>

What could be possibly wrong?

[alecchisi]

That is correct, because the html5 input tag like that only contains the filename (it is considered a text input). You should code a component like the one in my sandbox (or in the tutorial I've linked upper in this thread), and use the formik component to embed and expose correctly the corresponding object.

[Cuxs]

@alecchisi Ahh, cool. Thanks!

[gaurav-pantelwar]

@alecchisi What if I want file to be an optional and also if any file selected validate file size and file type?

[ZephSibley]

I refactored alecchisi's example into something more simple and functional https://codesandbox.io/s/keen-morning-otxz6

[mariselvanm]

@ZephSibley While updating the Formik and Yup libraries in your code sandbox it just stopped working. Can you please look at it? Because I wasted a lot of time on this. So, if you update this it'll help people who are looking for the same kind of solution.

[monsieur-z]

Hi, I'm running into the same issue as @mariselvanm, I believe. I've isolated it in a sandbox.

With version 1.5.8 of Formik, I'm able to see the file size in the console when I select a picture: https://codesandbox.io/s/yup-formik158-86xny

In this sandbox, I've just updated the version of Formik to 2.0.3, and I've got undefined instead of the file size: https://codesandbox.io/s/yup-formik203-14vlq

[mariselvanm]

@jaredpalmer Is there any way we can validate using validate and validateScheme in a single form?

[jaredpalmer]

@mariselvanm yes you can use both. I would not suggest it though. The results will be deeply merged.

[dorklord23]

After following this tutorial to integrate a file upload component in my form
https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc
I've been able to test file size and type like this:
iconFile: Yup.mixed() .test('fileSize', "File Size is too large", value => value.size <= FILE_SIZE) .test('fileType', "Unsupported File Format", value => SUPPORTED_FORMATS.includes(value.type) )

where FILE_SIZE is a numeric constant and SUPPORTED_FORMATS is an array of valid image type strings ['image/jpg', 'image/jpeg', 'image/gif', 'image/png']

@alecchisi I follow your example but variable value in the callback is null :/

PS:
I have fixed this by added validation for value like @zephsibley's code:

value && typeof value.arrayBuffer === 'function'