5
votes

Validation de la taille et du format des fichiers avec YUP

J'ai un formulaire utilisant reactjs + formik + yup. J'ai un champ de téléchargement de fichiers multiples. Je veux valider le format de fichier et la taille maximale en utilisant yup. Comment puis-je faire cela?

reactjs formik yup

0 commentaires

3 Réponses :

0
votes

Manipulez-le vous-même - vous n'êtes pas très doué pour valider les fichiers que j'ai trouvés.

Quelque chose comme:

 <Formik
  onSubmit={(values) => {
    // submission stuff
  }}
  initialValues={{ file1: undefined, file2: undefined }}
  validate={(values) => {
    const errors = {};
    if (values.file1 !== undefined) {
      if (values.file1.type !== 'text/plain'
        errors.file1 = 'Only .txt files allowed.';
      }
      if (values.file1.size > 1024 * 16) {
        errors.file1 = 'File too large.';
      }
    } else {
      errors.file1 = 'File is required.';
    }
    if (values.file2 == undefined) {
      if (values.file2.type !== 'image/jpeg'
        errors.file2 = 'Only .jpg images allowed.';
      }
      if (values.file2.size > 1024 * 16) {
        errors.file2 = 'File too large.';
      }
    } else {
      errors.file2 = 'File is required.';
    }
    return errors;
  }}
>

0 commentaires

4
votes

En développant la réponse de Devin , vous pouvez mettre en œuvre cette validation avec yup.

export function checkIfFilesAreTooBig(files?: [File]): boolean {
  let valid = true
  if (files) {
    files.map(file => {
      const size = file.size / 1024 / 1024
      if (size > 10) {
        valid = false
      }
    })
  }
  return valid
}

export function checkIfFilesAreCorrectType(files?: [File]): boolean {
  let valid = true
  if (files) {
    files.map(file => {
      if (!['application/pdf', 'image/jpeg', 'image/png'].includes(file.type)) {
        valid = false
      }
    })
  }
  return valid
}

Où se trouvent les fonctions de validation:

    const schema = Yup.object().shape({
       files: Yup.array()
         .nullable()
         .required('VALIDATION_FIELD_REQUIRED')
         .test('is-correct-file', 'VALIDATION_FIELD_FILE_BIG', checkIfFilesAreTooBig)
         .test(
           'is-big-file',
           'VALIDATION_FIELD_FILE_WRONG_TYPE',
           checkIfFilesAreCorrectType
         ),
})

0 commentaires

1
votes

Ce code fonctionnera pour valider les formats d'image.

const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];

export const validateImageType = (value) => {
  if(value) {
    let type = value.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0]
    return SUPPORTED_FORMATS.includes(type)
  }
}

  Yup.mixed() .test('fileSize', "File is too large", value => value.size <= FILE_SIZE) .test('fileType', "Your Error Message", value => SUPPORTED_FORMATS.includes(value.type) )

1 commentaires

Vous pouvez l'ajouter pour la validation de la taille Yup.mixed (). Test ('fileSize', "File Size is too large", value => value.size <= FILE_SIZE)