Angular - Event Listener File

event-listener.ts

import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
import { MatDialog } from '@angular/material';
import { Observable, Observer } from 'rxjs';

// Components
import { DocumentsEditorComponent } from '../documents-editor/documents-editor.component';
import { FileEditorComponent } from '../file-editor/file-editor.component';

// Services
import { DocumentService } from '../../../shared-services/services/document.service';

// Models
import { DocumentContents } from '../../../models/document-contents.model';
import { Folder } from '../../../models/folder.model';

@Directive({
    selector: '[appFileUpload]'
})
export class FileDirective {
    private readonly maxFileNameLength: number;
    @Input() folderKey: string;
    @Input() folders: Folder[];
    @HostBinding('style.background') private background = '#eee';

    @Output()
    documentUploaded: EventEmitter<string> = new EventEmitter();

    constructor(private documentService: DocumentService, public documentEditorDialog: MatDialog) {
        this.maxFileNameLength = 40;
    }

    @HostListener('dragover', ['$event']) public onDragOver(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this.background = '#999';
    }

    @HostListener('dragleave', ['$event']) public onDragLeave(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this.background = '#eee';
    }

    @HostListener('drop', ['$event']) public onDrop(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this.handleFiles(evt.dataTransfer.files);
    }

    @HostListener('change', ['$event']) public onClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this.handleFiles(evt.target.files);
    }

    private handleFiles(files: any) {
        if (!this.folderKey) {
            console.log('Documents must be placed in a folder');
            this.setFileLocation(files);
        } else {
            if (files.length > 0) {
                this.uploadFiles(files);
            }
        }
        this.background = '#eee';
    }

    private uploadFiles(files: any) {

        for (let file of files) {

            this.convertFileToBase64String(file).subscribe(base64String => {
                const documentContent: DocumentContents = {
                    name: file.name,
                    mimeType: file.type,
                    folderKey: this.folderKey,
                    base64: base64String
                };

                if (documentContent.name.length > this.maxFileNameLength) {
                    const dialogRef = this.documentEditorDialog.open(FileEditorComponent, {
                        data: { documentContent: documentContent }
                    });

                    dialogRef.afterClosed().subscribe((documentContent) => {
                        this.documentService.uploadFile(documentContent).subscribe((documentKey: string) => {
                            this.documentUploaded.emit(documentKey);
                        });
                    });

                }
                else {
                    this.documentService.uploadFile(documentContent).subscribe((documentKey: string) => {
                        this.documentUploaded.emit(documentKey);
                    });
                }

            });

        }
    }

    private convertFileToBase64String(file): Observable<string> {
        return Observable.create((observer: Observer<string>) => {
            const reader: FileReader = new FileReader();
            reader.onloadend = function () {
                const base64 = btoa(reader.result);
                observer.next(base64);
                observer.complete();
            };
            reader.readAsBinaryString(file);
        });
    }

    private setFileLocation(files): void {
        const dialogRef = this.documentEditorDialog.open(DocumentsEditorComponent, {
            data: { folders: this.folders, isRootFolder: true }
        });

        dialogRef.afterClosed().subscribe(folder => {
            this.folderKey = folder.folderKey;
            this.uploadFiles(files);
        });
    }

}