Как разделить события перетаскивания для одного и нескольких файлов в угловых

Question

Это рабочий файл Basic Drag Drop в угловом формате 6. Теперь проблема: когда я удаляю один файл в событии reader.onprogress, он отображает индикатор выполнения в течение 2 секунд и скрывает его, что также относится и к нескольким файлам.Но когда я снова удаляю новый файл, индикатор прогресса снова появляется для старых удаленных файлов, которые уже есть.Во-вторых, индикатор выполнения не идет от 0 до 100%, это уже 100%, вероятно, потому что я сбрасываю файлы локально.Есть ли способ, чтобы я мог показывать от 0 до 100% приращения индикатора при удалении файлов локально с моего рабочего стола.

HTML:

<div class="main-content" (dragover)="onDragOver($event)" (dragenter)="onDragEnter($event)" (drop)="onDrop($event)"
  #mainContentBox>
  <div class="main-content-inner">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3" *ngFor="let file of files">
          <div>
            <div class="file-container">
              <img [src]="file.src" alt="" class="img-fluid">
              <div class="file-info">
                <p class="title">{{file.name}}</p>
              </div>
              <div class="progress" style="height:5px" [@showHide]="isVisible">
                <div class="progress-bar" style="height:5px" [ngStyle]="{'width': pgWidth}"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Код TypeScript:

@Component({
  selector: 'qr-documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.css'],
  animations: [
    trigger('showHide', [
      state('on', style({'display':'block', 'opacity': 1})),
      state('off', style({'display': 'none', 'opacity': 0})),
      transition('on=>off', animate('0ms ease-in-out'))
    ])
  ]
})
export class DocumentsComponent implements OnInit {
  title: string;
  files: Array<any> = [];
  isVisible:string = 'on';
  pgWidth;
  fileContainerOverlay:string = 'on';

  constructor(private globalService: GlobalService, @Inject(DOCUMENT) private document: Document, private renderer: Renderer2) { }

  ngOnInit() {
    this.title = this.globalService.getBreadCrumb();

    window.addEventListener('dragover', (e) => {
      e.preventDefault()
    }, false)

    window.addEventListener('drop', (e) => {
      e.preventDefault()
    }, false)
  }

  onDragOver(e) {
    //console.log(e);

  }

  onDragEnter(e) {
    console.log(e);

  }

  onDrop(e) {
    this.isVisible = 'on';
    for(let i = 0; i < e.dataTransfer.files.length; i++) {
      let reader = new FileReader();
      let file = e.dataTransfer.files[i]    
      reader.readAsDataURL(file);

      reader.onprogress = (e) => {
        if(e.lengthComputable) {
          let loaded = Math.round((e.loaded/e.total)*100)
          let zeros = '';

          if(loaded >= 0 && loaded < 10) {
            zeros = '00';
          } else if(loaded < 100) {
            zeros = '0'
          }

          this.pgWidth = loaded+'%';

          if(loaded == 100) {
            setTimeout(()=>{
              this.isVisible = 'off';
            },500)
          }
        }
    }

      reader.onloadend = async () => {
        let promise = new Promise((resolve, reject)=>{
          resolve(reader.result)
        })

        let result = await promise;
        this.files.push({
          'name': file.name,
          'src': result
        })
      }      
    }    
  }

}