<md-card>
  <md-card-title>File upload</md-card-title>
  <md-card-subtitle>Easy to use Angular2 directives for files upload</md-card-subtitle>

  <md-card-content> 
    <div  fxLayout="row"  fxLayoutWrap="wrap"  fxLayoutAlign="start">
      <div fxFlex.gt-sm="20" fxFlex.gt-xs="50" fxFlex="100"  class="pr-1">
        <h6 class="mt-0">Select files</h6>
        <div ng2FileDrop
          [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
          (fileOver)="fileOverBase($event)"
          [uploader]="uploader" class="my-drop-zone mb-1">Base drop zone</div>

        <div ng2FileDrop
          [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
          (fileOver)="fileOverAnother($event)"
          [uploader]="uploader" class="my-drop-zone mb-1">Another drop zone</div>

        <p>Multiple</p>
        <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

        <div class="clearfix mb-1"></div>

        <p>Single</p>
        <input type="file" ng2FileSelect [uploader]="uploader" />
      </div>
      <div fxFlex.gt-sm="80" fxFlex.gt-xs="50" fxFlex="100">
        <h6 class="mt-0"  fxLayout="row">
          <span fxFlex>Upload queue</span>
          <span>Queue length: {{ uploader?.queue?.length }}</span>
        </h6>

        <ngx-datatable
          class="material ml-0 mr-0"
          [rows]="uploader.queue"
          [columnMode]="'flex'"
          [headerHeight]="50"
          [footerHeight]="0"
          [rowHeight]="'auto'">
          <ngx-datatable-column name="Name" [flexGrow]="2">
            <template let-row="row" ngx-datatable-cell-template>
              {{ row?.file?.name }}
            </template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Size" *ngIf="uploader.isHTML5" [flexGrow]="1">
            <template let-row="row" ngx-datatable-cell-template>
              {{ row?.file?.size/1024/1024 | number:'.2' }} MB
            </template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Progress" *ngIf="uploader.isHTML5" [flexGrow]="1">
            <template let-row="row" ngx-datatable-cell-template>
              <md-progress-bar mode="determinate" value="{{row.progress}}"></md-progress-bar>
            </template>
          </ngx-datatable-column>
          <ngx-datatable-column name="status" [flexGrow]="1">
            <template let-row="row" ngx-datatable-cell-template>
              <span *ngIf="row.isSuccess"><md-icon>check</md-icon></span>
              <span *ngIf="row.isCancel"><md-icon>cancel</md-icon></span>
              <span *ngIf="row.isError"><md-icon>delete</md-icon></span>
            </template>
          </ngx-datatable-column>
          <ngx-datatable-column name="action" [flexGrow]="2">
            <template let-row="row" ngx-datatable-cell-template>
              <button md-raised-button md-button-sm color="primary" type="button"
                (click)="row.upload()" [disabled]="row.isReady || row.isUploading || row.isSuccess">Upload</button>
              <button md-raised-button md-button-sm color="warn" type="button"
                (click)="row.cancel()" [disabled]="!row.isUploading">Cancel</button>
              <button md-raised-button md-button-sm color="accent" type="button"
                (click)="row.remove()">Remove
              </button>
            </template>
          </ngx-datatable-column>
        </ngx-datatable>

        <div class="mb-1">
          <p>Queue progress:</p>
          <md-progress-bar mode="determinate" value="{{uploader.progress}}"></md-progress-bar>
        </div>
        <button md-raised-button md-button-sm color="primary" type="button"
          (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">Upload all</button>
        <button md-raised-button md-button-sm color="warn" type="button"
          (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">Cancel all</button>
        <button md-raised-button md-button-sm color="accent" type="button"
          (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">Remove all</button>
      </div>
    </div>
  </md-card-content>
</md-card>