forked from valor-software/ng2-file-upload
-
Notifications
You must be signed in to change notification settings - Fork 40
/
ngfDrop.directive.ts
102 lines (80 loc) · 2.48 KB
/
ngfDrop.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import {
Directive, EventEmitter,
HostListener, Input, Output
} from '@angular/core';
import { ngf, dragMeta, eventToTransfer, filesToWriteableObject } from "./ngf.directive"
@Directive({
selector: "[ngfDrop]",
exportAs: "ngfDrop"
})
export class ngfDrop extends ngf {
@Output() fileOver:EventEmitter<any> = new EventEmitter();
@Input() validDrag:boolean = false
@Output() validDragChange:EventEmitter<boolean> = new EventEmitter()
@Input() invalidDrag = false
@Output() invalidDragChange:EventEmitter<boolean> = new EventEmitter()
@Input() dragFiles !: dragMeta[]
@Output() dragFilesChange:EventEmitter<dragMeta[]> = new EventEmitter()
@HostListener('drop', ['$event'])
onDrop(event:Event):void {
if(this.fileDropDisabled){
this.stopEvent(event);
return
}
this.closeDrags()
let files = this.eventToFiles(event)
if(!files.length)return
this.stopEvent(event);
this.handleFiles(files)
}
handleFiles(files:File[]){
this.fileOver.emit(false)//turn-off dragover
super.handleFiles(files)
}
@HostListener('dragover', ['$event'])
onDragOver(event:Event):void {
if(this.fileDropDisabled){
this.stopEvent(event);
return
}
const transfer = eventToTransfer(event)
let files = this.eventToFiles(event)
let jsonFiles = filesToWriteableObject(files)
this.dragFilesChange.emit( this.dragFiles=jsonFiles )
if( files.length ){
this.validDrag = this.isFilesValid(files)
}else{
//Safari, IE11 & some browsers do NOT tell you about dragged files until dropped. Always consider a valid drag
this.validDrag = true
}
this.validDragChange.emit(this.validDrag)
this.invalidDrag = !this.validDrag
this.invalidDragChange.emit(this.invalidDrag)
transfer.dropEffect = 'copy' // change cursor and visual display
this.stopEvent(event)
this.fileOver.emit(true)
}
closeDrags(){
delete this.validDrag
this.validDragChange.emit(this.validDrag)
this.invalidDrag = false
this.invalidDragChange.emit(this.invalidDrag)
delete this.dragFiles
this.dragFilesChange.emit( this.dragFiles )
}
@HostListener('dragleave', ['$event'])
onDragLeave(event:Event):any {
if(this.fileDropDisabled){
this.stopEvent(event);
return
}
this.closeDrags()
if ((this as any).element) {
if (event.currentTarget === (this as any).element[0]) {
return;
}
}
this.stopEvent(event);
this.fileOver.emit(false);
}
}