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

<template>
    <div class="wrap" v-if="!fileUploaded && !uploading">
        <Toast position="top-right" />

        <Panel header="Please upload a file">
            <FileUpload
                name="demo[]"
                :customUpload="true"
                :auto="true"
                @uploader="uploadFile"
            >
                <template #empty>
                    <p>Drag and drop files to here to upload.</p>
                </template>
            </FileUpload>
        </Panel>

        <BlockUI :blocked="uiBlocked" :fullScreen="true"></BlockUI>
    </div>
    <div class="wrap" v-else-if="!fileUploaded && uploading">
        <Skeleton />
        <Skeleton />
        <Skeleton />
        <Skeleton />
        <Skeleton />
        <Skeleton />
        <Skeleton />
    </div>
    <div class="wrap" v-else>
        <process-file :file="uploadResult" :filters="filters"></process-file>
    </div>
</template>

<script lang="ts">
    import axios from 'axios';
    // import Vue from 'vue';
    // import Component from 'vue-class-component';
    import { Vue, Component, Prop } from 'vue-property-decorator';

    @Component
    export default class Home extends Vue {

        @Prop({ default: [] })
        public readonly filters!: Array<object>

        public uiBlocked = false;
        public uploading = false;
        public fileUploaded: boolean = false;
        public uploadResult = null;

        /**
         *
         */
        public created()
        {
           console.log(this.filters);
        }

        /**
         * 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];

            let formData = new FormData();
            formData.append('file', file);

            setTimeout(
                () => {
                    axios.post(
                        'http://core.sandd/api/file',
                        formData,
                        {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                    ).then(
                        (response) => {
                            this.fileUploaded = true;
                            this.uploadResult = response.data;
                            // console.log('Success: ', response);
                        }
                    ).catch(
                        (err) => {
                            console.log('Error: ', err);
                        }
                    );
                }, 500
            )
        }
    }
</script>