Как правильно ввести обработчик onChange для файлов типа ввода?

Question

Почти как Свойство 'files' не существует при ошибке типа 'EventTarget' в машинописном тексте

Как правильно ввести обработчик onChange для файлов типа ввода?

<input
        id="myInput"
        type="file"
        ref={inputEl}
        onChange={onChangeFile}
      />

///
const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const files = Array.from(event.target.files);
    const arr = files.filter((file: any) => imageTypesRegExp.test(file.type));
  };

Что вызывает такие ошибки, как:

Property 'files' does not exist on type 'EventTarget'.

для event.target.files и

Object is of type 'unknown'.

для file.type

Answer 1

Отказ от ответственности: я не знаком с React / ReactJS, поэтому я использую только интерфейс DOM Event .

• Вам нужно преобразовать event.target (или event.currentTarget) на HTMLInputElement.
• Это потому, что интерфейс Event не является универсальным c (поэтому тип target или currentTarget указать нельзя).

Вот так:

const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const input = event.target as HTMLInputElement; // <-- here
    const files = Array.from(input.files);
    const arr   = files.filter((file: any) => imageTypesRegExp.test(file.type));
};

Кроме того, вам вообще не нужен этот обработчик событий, если вы хотите фильтровать файлы по типу MIME или расширению файла, вместо этого используйте атрибут <input accept="" /> , например:

• Только изображения JPEG и PNG:

  <input type="file" accept="image/jpeg, image/png" />
  

• Любое изображение:

  <input type="file" accept="image/*" />
  

• Только видео:

  <input type="file" accept="video/*" />