Проверка размера и формата файла с помощью YUP - PullRequest
Новая
       9

Проверка размера и формата файла с помощью YUP

0 голосов
/ 03 января 2019

У меня есть форма, использующаяactjs + formik + yup.У меня есть поле для загрузки нескольких файлов.Я хочу проверить формат файла и максимальный размер, используя yup.Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

Расширяя Ответ Девина , вы можете реализовать эту проверку с помощью yup. 

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

Где функции проверки: 

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
}
0 голосов
/ 07 февраля 2019

Просто сделайте это самостоятельно - да, не очень хорошо проверяет найденные мной файлы.

Что-то вроде: 

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