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

<template>
    <div class="wrap" v-if="!fileUploaded && !uploading">
        <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 /><br />
        <Skeleton /><br />
        <Skeleton /><br />
        <Skeleton /><br />
        <Skeleton /><br />
        <Skeleton /><br />
        <Skeleton /><br />
    </div>
    <div class="wrap" v-else>
        <process-file
            @newFile="uploadNewFile"
            :file="uploadResult"
            :searchers="searchers"></process-file>
    </div>
</template>

<script lang="ts" src="./Home.ts">
</script>