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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

@Directive({
  selector: '[dragDrop]'
})
export class DragDropDirective {
  @Output() fileDropped = new EventEmitter<FileList>()

  @HostBinding('class.dragover') dragover = false

  @HostListener('dragover', ['$event']) onDragOver (e: Event) {
    e.preventDefault()
    e.stopPropagation()
    this.dragover = true
  }

  @HostListener('dragleave', ['$event']) public onDragLeave (e: Event) {
    e.preventDefault()
    e.stopPropagation()
    this.dragover = false
  }

  @HostListener('drop', ['$event']) public ondrop (e: DragEvent) {
    e.preventDefault()
    e.stopPropagation()
    this.dragover = false
    const files = e.dataTransfer.files
    if (files.length > 0) this.fileDropped.emit(files)
  }
}