Блог

Мне нужно проверить, меньше ли изображение 1 МБ, если оно больше, я должен отменить событие и не позволять react устанавливать изображение на входе. Даже после проверки и выполнения условия изображение устанавливается на вход.

 import { useField, useFormikContext } from 'formik';
import { Snack } from 'bnb-ui/dist'
import { useState } from 'react';

interface InputProps {
  name: string;
  disabled: boolean;
}

export function UploadField({ name, disabled }: InputProps) {
  const [field, mata] = useField(name);
  const { setFieldValue, values } = useFormikContext<any>();
  const [openSnack, setOpenSnack] = useState<boolean>(false);

  const handleChange = (evt: React.FormEvent) => {
    const { files, value } = evt.target as HTMLInputElement;

    if (files amp;amp; files.length) {
      let file = files[0];
      if (file.size > 1024*1024) {
        setOpenSnack(true);
        return;
      } else {
        setFieldValue(name, value)
      };
    }
  }
}

return (
  <>
    <Snack open={openSnack} onClose={() => setOpenSnack(false)} message="O tamanho da imagem não pode ser superior a 1024Kb" variant="error" />
    <TextField
      disabled={disabled}
      placeholder="aaa"
      inputProps={{ accept: 'image/jpeg, image/png' }}
      type="file"
      variant="outlined"
      fullWidth
      onChange={handleChange}
      size="small"
      error={Boolean(mata amp;amp; mata.touched amp;amp; mata.error)}
      helperText={Boolean(mata amp;amp; mata.touched amp;amp; mata.error) amp;amp; mata.error}
    />
  </>
)
}
 

Вы можете использовать event.preventDefault() в обратном вызове события формы, который предотвратит выполнение действия по умолчанию при вводе пользователем, которым в вашем случае является файл изображения, установленный для ввода. Что — то вроде этого должно сработать:

 if (file.size > 1024 * 1024) {
  evt.preventDefault();
  // You can do more things here too.
} else {
  // Do whatever u want with your file
}