src.app.molecules.forms.import-file.import-file.component.ts Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of ui Show documentation
There is a newer version: 2.9.0
/**
 * Copyright 2017-2023 Enedis
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'chutney-import-file',
    templateUrl: './import-file.component.html',
    styleUrls: ['./import-file.component.scss']
})
export class ImportFileComponent implements OnInit {

    @Input() multiple = false;
    @Input() acceptedTypes = '(text/plain)|(application/json)';
    @Output() importEvent = new EventEmitter();

    selectedFiles: Array = new Array();

    constructor() {}

    ngOnInit() {
        const dropbox = document.getElementById('drop-box');
        dropbox.addEventListener('dragstart', (e) => this.dragStart(e), false);
        dropbox.addEventListener('dragleave', (e) => this.dragLeave(e), false);
        dropbox.addEventListener('dragover', (e) => this.dragOver(e), false);
        dropbox.addEventListener('drop', (e) => this.handleFileSelection(e), false);

        document.getElementById('input-file-browser')
                .addEventListener('change', (e) => this.handleFileSelection(e), false);
    }

    private dragStart(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.effectAllowed = 'copy';
    }

    private dragLeave(e) {
        e.stopPropagation();
        e.preventDefault();
        document.getElementById('drop-box').classList.remove('hover');
    }

    private dragOver(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        document.getElementById('drop-box').classList.add('hover');
    }

    private handleFileSelection(e) {
        e.stopPropagation();
        e.preventDefault();

        let files = [];
        if (e.dataTransfer != null) {
            files = Array.from(e.dataTransfer.files);
        } else if (e.target != null) {
            files = Array.from(e.target.files);
        }

        if (this.multiple) {
            this.selectFiles(files);
        } else {
            this.selectFile(files);
        }
        document.getElementById('drop-box').classList.remove('hover');
    }

    private selectFile(files: Array) {
        this.selectedFiles[0] = files[0];
    }

    private selectFiles(files: Array): any {
        for (let i = 0; i < files.length; i++) {
            if (this.isNotSelected(files[i]) && this.isAccepted(files[i].type)) {
                this.selectedFiles.push(files[i]);
            }
        }
    }

    private isNotSelected(file: File) {
        const found = this.selectedFiles.filter(f => this.isEqual(f, file));
        return found.length === 0;
    }

    private isEqual(first: File, second: File): boolean {
        return Object.is(first.lastModified, second.lastModified)
            && Object.is(first.name, second.name)
            && Object.is(first.size, second.size)
            && Object.is(first.type, second.type);
    }

    private isAccepted(type: string) {
        return type.match('^' + this.acceptedTypes + '$');
    }

    import() {
        this.importEvent.emit(this.selectedFiles);
    }

    cancel() {
        this.selectedFiles = [];
    }
}