next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts

import {
  Directive,
  ElementRef,
  EventEmitter,
  HostListener,
  Output
} from '@angular/core';

import { NGXLogger } from 'ngx-logger';

@Directive({
  selector: 'input[ucapUiFileUploadFor], div[ucapUiFileUploadFor]'
})
export class FileUploadForDirective {
  @Output()
  public fileDragEnter = new EventEmitter<DataTransferItemList>();

  @Output()
  public fileDragOver = new EventEmitter<void>();

  @Output()
  public fileDragLeave = new EventEmitter<void>();

  @Output()
  public fileSelected = new EventEmitter<File[]>();

  dragOver = false;

  constructor(private elementRef: ElementRef, private logger: NGXLogger) {}

  @HostListener('window:dragenter', ['$event'])
  public onDragEnter(event: DragEvent): any {
    if (!this.isFileDrag(event.dataTransfer)) {
      return;
    }

    if (!this.dragOver) {
      this.fileDragEnter.emit(event.dataTransfer.items);
      this.dragOver = true;
    }
  }

  @HostListener('window:dragover', ['$event'])
  public onDragOver(event: DragEvent): any {
    if (!this.isFileDrag(event.dataTransfer)) {
      return;
    }

    if (this.isEventInElement(event)) {
      event.dataTransfer.dropEffect = 'copy';
    } else {
      event.dataTransfer.dropEffect = 'none';
    }
    event.preventDefault();
  }

  @HostListener('window:dragleave', ['$event'])
  public onDragLeave(event: DragEvent): any {
    if (!this.isFileDrag(event.dataTransfer)) {
      return;
    }

    if (event && event.pageX === 0 && event.pageY === 0) {
      this.fileDragLeave.emit();
      this.dragOver = false;
    }
  }

  @HostListener('change')
  public onChange(): any {
    const files = this.elementRef.nativeElement.files;
    this.fileSelected.emit(files);
    this.elementRef.nativeElement.value = '';
  }

  @HostListener('window:drop', ['$event'])
  public onDrop(event: any): any {
    if (!this.isFileDrag(event.dataTransfer)) {
      return;
    }
    const files = event.dataTransfer.files;
    this.fileSelected.emit(files);
    event.preventDefault();
    event.stopPropagation();
    this.elementRef.nativeElement.value = '';
    this.dragOver = false;
  }

  private isFileDrag(dataTransfer: DataTransfer): boolean {
    if (0 >= dataTransfer.items.length) {
      return false;
    }

    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < dataTransfer.items.length; i++) {
      const element = dataTransfer.items[i];
      if ('file' !== element.kind) {
        return false;
      }
    }

    return true;
  }

  private isEventInElement(event: DragEvent): boolean {
    const rect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();

    if (
      event.pageX >= rect.left &&
      event.pageX <= rect.left + rect.width &&
      event.pageY >= rect.top &&
      event.pageY <= rect.top + rect.height
    ) {
      return true;
    }
    return false;
  }
}