I am uploading files/folder on server. and tracking progress with HttpEventType on client side to show progress but it showing file upload completed even all file has not been uploaded on server. and after some time there is response from server of success.

fileUpload(event: any) {
    this.files = event.target.files;
    this.api.uploadFiles(this.files).subscribe((res) => {
      console.log(res);
    })
  }

uploadFiles(file:FileList){
    const formData:FormData =new FormData();
    formData.append("key","name")
    for(let i=0;i<file.length;i++){
       formData.append("files",file[i]);
    }
    const req = new HttpRequest('POST',fileUploadPath, formData, {
      reportProgress: true
    });
    return this.http.request(req).pipe(
      
      map(res =>{
          if (res.type === HttpEventType.UploadProgress) {
            const percentDone = Math.round(100 * res.loaded / (res.total ?? 0));
            this.loader.progressValue=percentDone;
          }
          if(res.type==HttpEventType.Response){
            this.loader.displayProgress=false;
          }
          return res;
      }),
      catchError((err):any=>{this.error.handleError(err);return err})
    );
  }