46 lines
1015 B
TypeScript
46 lines
1015 B
TypeScript
|
import {
|
||
|
|
Directive,
|
||
|
|
Output,
|
||
|
|
Input,
|
||
|
|
EventEmitter,
|
||
|
|
HostBinding,
|
||
|
|
HostListener
|
||
|
|
} from '@angular/core';
|
||
|
|
|
||
|
|
import { NewtonFile } from '../types/file.type';
|
||
|
|
|
||
|
|
|
||
|
|
@Directive({
|
||
|
|
selector: '[dropzone]'
|
||
|
|
})
|
||
|
|
export class DndDirective {
|
||
|
|
@HostBinding('class.fileover') fileOver!: boolean;
|
||
|
|
@Output() fileDropped = new EventEmitter<any>();
|
||
|
|
|
||
|
|
@HostListener('dragover', ['$event']) onDragOver(evt: any) {
|
||
|
|
evt.preventDefault();
|
||
|
|
evt.stopPropagation();
|
||
|
|
|
||
|
|
this.fileOver = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
@HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
|
||
|
|
evt.preventDefault();
|
||
|
|
evt.stopPropagation();
|
||
|
|
|
||
|
|
this.fileOver = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
@HostListener('drop', ['$event']) public ondrop(evt: any) {
|
||
|
|
evt.preventDefault();
|
||
|
|
evt.stopPropagation();
|
||
|
|
|
||
|
|
this.fileOver = false;
|
||
|
|
let files: Array<NewtonFile> = evt.dataTransfer.files;
|
||
|
|
|
||
|
|
if (files.length == 0) return;
|
||
|
|
|
||
|
|
this.fileDropped.emit(files);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|