39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
|
|
|
|
@Directive({
|
|
selector: '[iqserDragDropFileUpload]',
|
|
})
|
|
export class DragDropFileUploadDirective {
|
|
@Output() readonly fileDropped = new EventEmitter();
|
|
@HostBinding('class.drag-over') private _dragOver = false;
|
|
|
|
@HostListener('dragover', ['$event'])
|
|
onDragOver(event: DragEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (event.dataTransfer?.types.includes('Files')) {
|
|
this._dragOver = true;
|
|
}
|
|
}
|
|
|
|
@HostListener('dragleave', ['$event'])
|
|
onDragLeave(event: DragEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this._dragOver = false;
|
|
}
|
|
|
|
@HostListener('drop', ['$event'])
|
|
onDrop(event: DragEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (event?.dataTransfer?.types.includes('Files')) {
|
|
this._dragOver = false;
|
|
const files = event.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
this.fileDropped.emit({ target: { files } });
|
|
}
|
|
}
|
|
}
|
|
}
|