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

import axios from 'axios';
import { Vue, Component, Prop } from 'vue-property-decorator';

@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 = null;

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

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


        this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
        let file = event.files[0];

        setTimeout(
            async () => {
                let response = await this.$api.uploadFile(file);
                this.fileUploaded = true;
                this.uploadResult = response;
            }, 500
        )
    }
}