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: EventEmitter<any> = new EventEmitter();

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

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

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

  dragOver = false;

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

  @HostListener('window:dragenter', ['$event'])
  public onDragEnter(event: any): any {
    const files = event.dataTransfer.files;
    if (!this.dragOver) {
      this.fileDragEnter.emit(files);
      this.dragOver = true;
    }
  }

  @HostListener('window:dragover', ['$event'])
  public onDragOver(event: any): any {
    event.preventDefault();
  }

  @HostListener('window:dragleave', ['$event'])
  public onDragLeave(event: any): any {
    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 {
    const files = event.dataTransfer.files;
    this.fileSelected.emit(files);
    event.preventDefault();
    event.stopPropagation();
    this.elementRef.nativeElement.value = '';
    this.dragOver = false;
  }
}