searchanddisplace-core/resources/js/components/Home/Home.ts

import {Vue, Component, Prop} from 'vue-property-decorator';
import FileUploadResponse from '@/interfaces/responses/FileUploadResponse';
import {isServerError} from "@/SearchDisplace/helpers";

@Component
export default class Home extends Vue {
    @Prop({default: []})
    public readonly searchers!: { [key: string]: string; }

    public uiBlocked = false;
    public uploading = false;
    public fileUploaded: boolean = false;
    public uploadResult: FileUploadResponse = {
        id: '',
        file_name: '',
    };
    public error: string = '';

    /**
     * A method which uploads the files to the server for processing
     *
     * @param {any} event The event containing the uploaded files information
     */
    public async uploadFile(event: any): Promise<void> {
        let file = event.files[0];
        return this.uploadNewFile(file);
    }

    /**
     * A method which uploads the files to the server for processing
     *
     * @param {File} file The event containing the uploaded files information
     */
    public async uploadNewFile(file: File): Promise<void> {
        this.uploading = true;
        this.fileUploaded = false;

        this.$toast.add({severity: 'info', summary: 'Uploading...', detail: 'Uploading your file...', life: 3000});

        try {
            let response = await this.$api.uploadFile(file);

            this.fileUploaded = true;
            this.uploadResult = response;
        } catch (e) {
            this.uploading = false;
            this.fileUploaded = false;

            if (isServerError(e)) {
                if (e.response.data.hasOwnProperty('errors')) {
                    const errors = e.response.data.errors;

                    if (errors.hasOwnProperty('file')) {
                        this.error = errors.file[0];

                        return;
                    }
                }

                if (e.response.data.hasOwnProperty('message')) {
                    this.error = e.response.data.message;

                    return;
                }
            }

            this.error = 'There was an error uploading your file. Please try again later.';
        }
    }

    public onError(error: string) {
        this.error = error;
    }
}