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: '',
        path: ''
    };

    /**
     *
     */
    public created()
    {}

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


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

        try {
            let file = event.files[0];

            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;
        }
    }
}