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

<template>
    <div class="wrap">
        <Panel header="Header">
            <FileUpload
                name="demo[]"
                :customUpload="true"
                :auto="true"
                @uploader="myUploader"
            >
                <template #empty>
                    <p>Drag and drop files to here to upload.</p>
                </template>
            </FileUpload>
        </Panel>

        <!--        <process-file :files="files"></process-file>-->

        <BlockUI :blocked="uiBlocked" :fullScreen="true"></BlockUI>
    </div>
</template>

<script>
import FileUpload from 'primevue/fileupload';
import BlockUI from 'primevue/blockui';
import Panel from 'primevue/panel';

export default {
    data() {
        return {
            uiBlocked: false,
            files: [],
        };
    },

    props: {
        filters: {
            required: true,
            type: Array,
        },
    },

    components: {
        FileUpload,
        BlockUI,
        Panel,
    },

    methods: {
        myUploader(event) {
            this.uiBlocked = true;

            event.files.forEach((file) => {
                // Handle the file

                this.files.push(file);
            });

            setTimeout(() => {
                this.uiBlocked = false;

                // this.$router.push('process-file');
            }, 500);
        },
    },
};
</script>