FarmMapsLib/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html

<div class="resumable-file-upload closed" [ngClass]="{'closed': uploadService.isClosed }">
  <div>
    <div class="card">
      <div class="card-header  p-3 bg-primary text-white">
        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
        <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
        <span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
      </div>
      <div [ngClass]="{'minimized': uploadService.isMinimized }">
        <div class="card-block p-3">
          <ul class="list-unstyled">
            <li *ngFor="let file of uploadService.files" class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
              <div *ngIf="file.success == false"><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fa fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fa fa-check"></span></div>
              <div *ngIf="file.success"><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fa fa-check"></span></div>
              <div class="progress-container"><div class="progress-bar" [style.width]="file.progress+'%'"></div></div>
              <div class="errormessage">{{file.errorMessage}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>