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