client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts

   1 import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
   2
   3 @Directive({
   4   selector: '[dragDrop]'
   5 })
   6 export class DragDropDirective {
   7   @Output() fileDropped = new EventEmitter<FileList>()
   8
   9   @HostBinding('class.dragover') dragover = false
  10
  11   @HostListener('dragover', ['$event']) onDragOver (e: Event) {
  12     e.preventDefault()
  13     e.stopPropagation()
  14     this.dragover = true
  15   }
  16
  17   @HostListener('dragleave', ['$event']) public onDragLeave (e: Event) {
  18     e.preventDefault()
  19     e.stopPropagation()
  20     this.dragover = false
  21   }
  22
  23   @HostListener('drop', ['$event']) public ondrop (e: DragEvent) {
  24     e.preventDefault()
  25     e.stopPropagation()
  26     this.dragover = false
  27     const files = e.dataTransfer.files
  28     if (files.length > 0) this.fileDropped.emit(files)
  29   }
  30 }