]>
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 { | |
7 | @Output() onFileDropped = 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 | let files = e.dataTransfer.files | |
28 | if (files.length > 0) this.onFileDropped.emit(files) | |
29 | } | |
30 | } |