Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
import { Directive, Output, Input } from '@angular/core';
import { HostListener, HostBinding, EventEmitter } from '@angular/core';
@Directive({
selector: '[appDragNDrop]'
})
export class DragNDropDirective {
constructor() {}
@Output()
private filesChangeEmiter: EventEmitter<File[]> = new EventEmitter();
@Output()
private invalidFilesChangeEmitter: EventEmitter<File[]> = new EventEmitter();
@Input() private allowed_extensions: Array<string> = [];
@HostBinding('style.background') private background = '#fff';
@HostListener('dragover', ['$event'])
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
const files = evt.dataTransfer.files;
this.background = '#ddebf2';
}
@HostListener('dragleave', ['$event'])
public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation(); // do some stuff
this.background = '#fff';
}
@HostListener('drop', ['$event'])
public onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
const files = <File[]>Array.from(evt.dataTransfer.files);
const valid_files: Array<File> = [];
const invalid_files: Array<File> = [];
if (files.length > 0) {
files.forEach(file => {
const ext = file.name.split('.')[file.name.split('.').length - 1];
if (this.allowed_extensions.lastIndexOf(ext) !== -1) {
valid_files.push(file);
} else {
invalid_files.push(file);
}
});
this.invalidFilesChangeEmitter.emit(invalid_files);
this.filesChangeEmiter.emit(valid_files); // if (invalid_files.length > 0) {
// this.background = '#ff0000';
// } else {
this.background = '#fff';
// }
}
}
}