Реагировать - Проверить размеры выбранного пользователем изображения

Question

У меня есть селектор файлов, который вызывает функцию для проверки изображения перед его отправкой на сервер для обработки на стороне сервера. Я пытаюсь убедиться, что загруженное изображение имеет значение png или jpg и находится под 2mb. Я также стараюсь, чтобы его размеры не превышали 200 by 200. Я могу успешно проверить тип и размер файла, но не могу получить размеры.

Вот мой код:

profilePicInputChange(event){

  var pattern = /^[\w,\s-]+\.[A-Za-z]{3}$/;

  var filepath = event.target.value.split("\\");
  var filename = filepath.pop();

  if(pattern.test(filename)){

    var extensionList = filename.split(".");
    var extension = extensionList.pop();

    if(extension === 'png' || extension === 'jpg'){
      if(event.target.files[0].size <= 2000000){
        document.getElementById("invalidLicence").innerHTML = "";
        this.setState({
          profilePic: event.target.files[0],
          profilePicValid: true
        });
      }else{
        document.getElementById("invalidProfilePic").innerHTML = "<strong>Please Upload a file less than 2MB.</strong>";
        document.getElementById("invalidProfilePic").style.color = "red";
        this.setState({
          profilePicValid: false
        });
      }
    }else{
      document.getElementById("invalidProfilePic").innerHTML = "<strong>Please Upload a valid file type.</strong>";
      document.getElementById("invalidProfilePic").style.color = "red";
      this.setState({
        profilePicValid: false
      });
    }
  }else{
    document.getElementById("invalidProfilePic").innerHTML = "<strong>Please Upload a file with a valid name.</strong>";
    document.getElementById("invalidProfilePic").style.color = "red";
    this.setState({
      profilePicValid: false
    });
  }
}

РЕДАКТИРОВАТЬ 1

Вероятно, следовало упомянуть об этом изначально, но я попытался ответить на этот вопрос, но не смог получить желаемый результат:

Можно ли проверить размеры изображения перед загрузкой?