49 lines
1.6 KiB
TypeScript
Executable File
49 lines
1.6 KiB
TypeScript
Executable File
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();
|
|
@HostBinding('class') public background = 'uk-placeholder cm-file-drop-area cm-coloured-text';
|
|
|
|
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';
|
|
let files: Array<File> = evt.dataTransfer.files;
|
|
let valid_file: File = null;
|
|
let invalid_file: File = null;
|
|
if (files.length === 1) {
|
|
let file = files[0];
|
|
let ext = file.name.split('.')[file.name.split('.').length - 1];
|
|
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);
|
|
}
|
|
}
|
|
|
|
}
|