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

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

@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 (err) {
            console.log('Error uploading file: ', err);
            this.$toast.add({
                severity: 'error',
                summary: 'Error!',
                detail: 'There was an error uploading your file. Please try again later',
                life: 3000
            });

            this.uploading = false;
            this.fileUploaded = false;
        }
    }

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