2018-02-28 12:41:06 +01:00
|
|
|
import {Directive, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[appDropFileUpload]'
|
|
|
|
})
|
|
|
|
export class FileUploadDirective {
|
|
|
|
|
|
|
|
@Input() private allowedExtensions: Array<string> = [];
|
|
|
|
@Input() private maxFileSize = 104857600;
|
|
|
|
@Output() private filesChange: EventEmitter<File> = new EventEmitter();
|
|
|
|
@Output() private filesInvalid: EventEmitter<File> = new EventEmitter();
|
2019-05-30 10:39:35 +02:00
|
|
|
@HostBinding('class') public background = 'uk-placeholder cm-file-drop-area cm-coloured-text';
|
2018-02-28 12:41:06 +01:00
|
|
|
|
|
|
|
constructor() { }
|
|
|
|
|
|
|
|
@HostListener('dragover', ['$event']) public onDragOver(evt) {
|
|
|
|
evt.preventDefault();
|
|
|
|
evt.stopPropagation();
|
|
|
|
this.background = 'uk-placeholder cm-file-drop-area cm-coloured-text uk-dragover';
|
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('dragleave', ['$event']) public onDragLeave(evt) {
|
|
|
|
evt.preventDefault();
|
|
|
|
evt.stopPropagation();
|
|
|
|
this.background = 'uk-placeholder cm-file-drop-area cm-coloured-text';
|
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('drop', ['$event']) public onDrop(evt) {
|
|
|
|
evt.preventDefault();
|
|
|
|
evt.stopPropagation();
|
|
|
|
this.background = 'uk-placeholder cm-file-drop-area cm-coloured-text';
|
2019-05-30 20:34:40 +02:00
|
|
|
const files: Array<File> = evt.dataTransfer.files;
|
2018-02-28 12:41:06 +01:00
|
|
|
let valid_file: File = null;
|
|
|
|
let invalid_file: File = null;
|
|
|
|
if (files.length === 1) {
|
2019-05-30 20:34:40 +02:00
|
|
|
const file = files[0];
|
|
|
|
const ext = file.name.split('.')[file.name.split('.').length - 1];
|
2018-02-28 12:41:06 +01:00
|
|
|
if (this.allowedExtensions.lastIndexOf(ext) !== -1 && file.size <= this.maxFileSize) {
|
|
|
|
valid_file = file;
|
|
|
|
} else {
|
|
|
|
invalid_file = file;
|
|
|
|
}
|
|
|
|
this.filesChange.emit(valid_file);
|
|
|
|
this.filesInvalid.emit(invalid_file);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|