Angular как показать курсор загрузки на Angular Загрузка файла

Question

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

Как я могу перехватить вызов и показать экран загрузки или даже курсор ожидания пока, наконец, не откроется диалоговое окно файла.

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
          #input
           (change)="handleFileInput($event.target.files)">
  <button type="button" (click)="showLoader(); input.click();">Click Me</button>
</div>

handleFileInput отлично работает, когда пользователь выбирает файл для загрузки, однако между нажатием кнопки «Выбрать файл» и нажатием кнопки «Выбрать файл» проходит 5–7 секунд отображается диалоговое окно

ИЗМЕНИТЬ, это диалоговое окно, о котором я говорю

ИЗМЕНИТЬ №2: Итак, основываясь на ответе ниже, я решил, что может вызвать два события с помощью функции нажатия кнопки. Я могу отобразить экран загрузки, пока диалоговое окно собирается, но проблема теперь в том, если пользователь нажимает кнопку отмены диалогового окна. Экран загрузки не go далеко.

Answer 1

Это можно сделать, добавив логический флаг и, помимо события change, вам также нужно добавить событие click.

В файле ts:

// add a property to your class
public isOpening = false; // you can set it to true in the click event

// make sure to set it false in this method
handleFileInput(event: Event) {
 this.isOpening = false;
 ...
}

В шаблоне html:

<div class="form-group" *ngIf="!isOpening"> // you can hide the form after the user triggers the event
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (click) = "this.isOpening = true" // or create a method in the ts file
           (change)="handleFileInput($event.target.files)">
</div>

// here add a div or a spinner or whatever you like
<div *ngIf="isOpening"> Please wait! Dialog is opening...</div>

Answer 2

Если вы используете материал angular, вы можете использовать компонент Mat-Spinner. Проверить ссылку. https://material.angular.io/components/progress-spinner/overview

В основном вы просто реализуете mat-spinner внутри вашего html, а затем вы можете использовать директиву ngif, чтобы показать загрузочный spinner, когда файл загружается. Таким образом, у вас может быть переменная под названием «загрузка», которая может быть истинной или ложной в зависимости от того, загружаете ли вы файл. См. Фрагмент ниже для справки:

<mat-spinner *ngIf="uploading"></mat-spinner>

Надеюсь, это именно то, что вы искали.