Проверка файла перед загрузкой ошибка реакции

#javascript #reactjs #mime-types

Вопрос:

Я пытаюсь проверить выбранный тип файла перед его загрузкой на сервер, но при компиляции я получаю странную ошибку.

Получение файла:

             <Button
                  id="UploadButton"
                  component="label"
                  htmlFor="fileInput"
                >
                  Upload Media{" "}
                  <input
                    id="fileInput"
                    type="file"
                    hidden
                    required
                    onChange={filePickerHandler}
                  />
                </Button>
 

Устройство для обработки файлов:

   const [file, setFile] = useState("");

  const filePickerHandler = (event) => {
  event.preventDefault();
  setFile(event.target.files[0]);
 };
 

Проверка типов:

   const checkFileType = (file)=>{

    if(file.type.match("image.*"))
    return "image";

    if(file.type.match('video.*'))
    return 'video';

    if(file.type.match('audio.*'))
    return 'audio';

  return 'Not Supported';}
 

После компиляции проекта я получаю это:

введите описание изображения здесь

Я был бы признателен, если бы кто-нибудь из вас мог мне помочь.

Комментарии:

1. Когда вы используете checkFileType ?

2. После того, как пользователь выберет файл для загрузки и установит файл.@ Маджидм.

3. В вашей checkFileType функции сначала проверьте, не является ли файл пустым или неопределенным, прежде чем выполнять проверку типа следующим образом, if(!file) return;

4. @Ahmadreza Вы отправляете event.target.files[0] в качестве параметра checkFileType ?

5. @HassanAzzam Спасибо, сработало отлично.