File format validation doesn't work with some formats

[lossen]

🐛 Bug report

I am using formik and yup for validation this is my yup object It is working, but I have noticed that this code doesn't support some formats

export function setAssetSchema(createMode,rules) {
    let {
        ASSET_NAME_MAX_LENGTH,
        ASSET_DESCRIPTION_MAX_LENGTH,
        ASSET_NAME_MIN_LENGTH,
        ASSET_DESCRIPTION_MIN_LENGTH,
        VIDEO_UPLOAD_MAX_SIZE_BYTES,
        AUDIO_UPLOAD_MAX_SIZE_BYTES,
        IMAGE_UPLOAD_MAX_SIZE_BYTES,
        ASSET_SUPPORTED_FORMATS
    } = rules;
    function checkType(type){
        if(isImage(type)){
            return IMAGE_UPLOAD_MAX_SIZE_BYTES
        }else if(isVideo(type)){
            return VIDEO_UPLOAD_MAX_SIZE_BYTES
        }else return AUDIO_UPLOAD_MAX_SIZE_BYTES
    }
    return Yup.object().shape({
        name: Yup.string()
            .min(ASSET_NAME_MIN_LENGTH, 'Too Short!')
            .max(ASSET_NAME_MAX_LENGTH, 'Too Long!')
            .required('Required'),
        description: Yup.string()
            .min(ASSET_DESCRIPTION_MIN_LENGTH, 'Too Short!')
            .max(ASSET_DESCRIPTION_MAX_LENGTH, 'Too Long!')
            .required('Required'),
        file: createMode && Yup
            .mixed()
            .required("Required")
            .test(
                "fileSize",
                "File too large",
                value => value && value.size <= checkType(value)
            )
            .test(
                "fileFormat",
                "Unsupported Format",
                value => value && ASSET_SUPPORTED_FORMATS.includes(value.type)
            )
    })
}

Current Behavior

My supported formats : [ "image/jpg", "image/jpeg", "image/png", "audio/mp3", "video/mp4", "video/mov", ] But when I select this formats : .cmx, .sketch, .cdr validation doesn't work

Expected behavior

All format which doesn't include in my supported formats array should be rejected by the validation

Reproducible example

I have partially used code from this example https://codesandbox.io/s/formik-file-input-with-validation-pn3vb

Your environment

Software	Version(s)
Formik	1.5.8
React	16.8.6
Browser	chrome
npm	6.10.2
Operating System	mac os

[jaredpalmer]

Is this a Formik or a yup question?

[lossen]

Is this a Formik or a yup question?

Probably you're right. My bad, sorry.

[fiuzagr]

I think this problem is related to Formik. Because Formik needs to identify the type of input to pass the correct value to the validators. If the input type is a file, Formik must pass event.target.files to the validator. Otherwise, validators will always receive the file name and any validation would be very superficial.

[uidevkarthick]

YUP file upload not woking this example. when i click file upload button , it's throw error file is too large before uloading images. please anyone give solution

const schema = yup.object().shape({ bankname: yup.string().required(), bankcode: yup.string().required(), servicecode: yup.string().required(), signincertificatealias: yup.string().required(), intermediatecertificatealias: yup.string().required(), rootcertificatealias: yup.string().required(), privatekeyalias: yup.string().required(), hsmindexvalue: yup.string().required(), regbanklogo: yup .mixed() .required('You need to provide a file') .test('fileSize', 'The file is too large', (value) => { return value && value.size <= 1000000; }) .test('type', 'We only support jpeg', (value) => { return value && value.type === 'image/jpeg'; }) })