src/app/shared/controls/file-drop/component/file-drop.component.ts

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import {Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output, ViewChild} from "@angular/core";
import {NG_VALUE_ACCESSOR} from "@angular/forms";
import {IAttachmentWithTags} from "../../../../store";
import {arrayJoin} from "../../../../util";
import {AbstractControlValueAccessorComponent} from "../../common";

@Component({
    selector: "app-file-drop",
    templateUrl: "./file-drop.component.html",
    styleUrls: ["./file-drop.component.scss"],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => FileDropComponent),
            multi: true
        }
    ]
})
export class FileDropComponent extends AbstractControlValueAccessorComponent<IAttachmentWithTags<File>[]> {

    @HostBinding("class.no-drop")
    @Input()
    public appDisabled = false;

    /**
     * List of tag ids which are added automatically to dropped files.
     */
    @Input()
    public appAutoTagIds: string[];

    @Output()
    public appValueDelete = new EventEmitter<File>();

    @ViewChild("inputElement")
    public inputElement: ElementRef<HTMLInputElement>;

    @HostListener("dragover", ["$event"])
    public onDragOver(event: DragEvent) {
        if (this.appDisabled) {
            return;
        }

        event.preventDefault();
    }

    @HostListener("drop", ["$event"])
    public onDrop(event: DragEvent) {
        if (this.appDisabled) {
            return;
        }

        if (event?.dataTransfer?.files?.length > 0) {
            event.preventDefault();
            this.onInput(event?.dataTransfer?.files);
        }
    }

    public openDialog(): void {
        if (!this.appDisabled && typeof this.inputElement?.nativeElement?.click === "function") {
            this.inputElement.nativeElement.value = "";
            this.inputElement.nativeElement.click();
        }
    }

    public onInput(fileList: FileList) {
        if (this.appDisabled) {
            return;
        }
        const value = arrayJoin(
            this.appValue,
            fileListToFileArray(fileList)
                .map((_) => ({attachment: _, tags: arrayJoin(this.appAutoTagIds)}))
        );
        this.writeValue(value, true);
    }

    public onDelete(index: number) {
        if (this.appDisabled || !Array.isArray(this.appValue) || this.appValue[index]?.attachment == null) {
            return;
        }

        const file = this.appValue[index].attachment;
        const value = this.appValue.filter((_) => _?.attachment !== file);
        this.writeValue(value, true);
        this.appValueDelete.emit(file);
    }

    public writeValue(obj: IAttachmentWithTags<File>[], emit?: boolean): void {
        super.writeValue(arrayJoin(obj).filter((_) => _?.attachment instanceof File), emit);
    }

}

function fileListToFileArray(fileList: FileList): File[] {
    try {
        const result: File[] = [];
        for (let i = 0; i < fileList.length; i++) {
            result.push(fileList.item(i));
        }
        return result;
    } catch (e) {
        return [];
    }
}