How to monitor file upload status to server in angular 5?

Question

JavaScript

Guys, hello everyone.
Tell me how to upload several files to the server with tracking of their status (completion) of the download
created such a function

public sendFiles(data) {
    const headers = new HttpHeaders().set(
      'Authorization',
      'Bearer ?????????????????????????????'
    );
    const req = new HttpRequest(
      'POST',
      'http://localhost:8081/upload/files',
      data,
      { reportProgress: true, headers, responseType: 'text' }
    );
    return this.httpClient.request(req);
  }

loading here

public changeinput(event) {
    let chosenFiles = event.target.files || event.srcElement.files;
    const error = this.validateFiles(chosenFiles);
    if (error.length) {
      alert(error);
      let btn: HTMLInputElement = document.getElementById(
        'file-uploads'
      ) as HTMLInputElement;
      btn.value = null;
    } else {
      Array.prototype.push.apply(this.transmittedFiles, chosenFiles);
      const formData = new FormData();
      Array.prototype.forEach.call(this.transmittedFiles, (file, index) => {
        console.log(file);
        formData.append(`files`, file);
      });
      this.dataExchangeService
        .sendFiles(formData)
        .subscribe(event => console.log(event));
    }
  }

the console displays the result of immediately downloading all files in the formdata ... and I need to draw a download indicator next to each downloaded file, which shows whether the file is loaded or not

Answer 1

https://angular.io/guide/http - look here for the word tracking
or google
angular 5 http progress
angular 5 http tracking
angular http interceptor upload tracking