next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'ucap-ui-file-upload-queue',
  templateUrl: './file-upload-queue.component.html',
  styleUrls: ['./file-upload-queue.component.scss']
})
export class FileUploadQueueComponent implements OnInit {
  @Output()
  filesChange = new EventEmitter<File[]>();

  @Input() set files(files: File[]) {
    this.uploadFiles = files;
    this.uploadItems = undefined;
  }
  uploadFiles: File[];

  @Input() set items(items: DataTransferItemList) {
    const uploadItems: DataTransferItem[] = [];
    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < items.length; i++) {
      uploadItems.push(items[i]);
    }
    this.uploadItems = [...uploadItems];
  }
  uploadItems: DataTransferItem[];

  constructor(private logger: NGXLogger) {}

  ngOnInit() {}

  onClickClear(file: File) {
    this.uploadFiles = this.uploadFiles.filter(f => {
      return f.name !== file.name && f.path !== file.path;
    });
    this.filesChange.emit(this.uploadFiles);
  }
}