Как заставить файл входного типа ждать ответа http-запроса перед открытием выбора файлов

Question

На моей странице есть средство выбора файлов.

<input type='file' id='xxx'>

При щелчке этого ввода я должен проверить некоторые другие поля через HTTP-запрос. Теперь мне нужно, чтобы средство выбора файлов подождало, пока я не получу ответ от HTTP-запроса. Есть ли способ, которым я могу достичь этого.

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

Я пытался вызвать асинхронный / синхронизирующий метод, но безуспешно.

Я использую угловой 6.

Answer 1

Я думаю, тебе нужно что-то подобное.UPDT: извините, исправлен пример для работы

@Directive({
  selector: '[validateClick]'
})
export class ValidateClickDirective {
  private _isValid: boolean = false;

  constructor(
    private _elementRef: ElementRef<HTMLElement>
  ) { }

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent): void {
    if (!this._isValid) {
      event.preventDefault();
      of(true) // your request to the server
        .pipe(delay(1000))
        .subscribe((isValid: boolean) => {
          this._isValid = isValid
          if (isValid) {
            this._elementRef.nativeElement.click();
          }
        })
    } else {
      this._isValid = false;
    }
  }

}

И используйте его:

<input type="file" validateClick>