Very basic vuejs usage of uppy

uppy-vue-example

<template>
    <div :id="uppyId">
        <div class="ThumbnailContainer" v-if="collection === 'thumbnail'">
            <button id="open-thumbnail-modal" class="button">Select file</button>

        </div>
        <div class="DashboardContainer" v-else></div>
    </div>
</template>

<script>
    const Uppy = require('uppy/lib/core');
    const Dashboard = require('uppy/lib/plugins/Dashboard');
    const XHRUpload = require('uppy/lib/plugins/XHRUpload');

    export default {
        props: {
            modelClass: {
                type: String,
                required: true
            },
            modelId: {
                type: String,
                required: true
            },
            collection: {
                type: String,
                required: true
            },
            endpoint: {
                type: String,
                required: false,
                default() {
                    return '/upload'
                }
            }
        },

        data() {
            return {}
        },

        computed: {
            uppyId() {
                return this.modelClass + '-' + this.modelId + '-' + this.collection;
            }
        },

        mounted() {
            const uppy = Uppy({
                id: this.uppyId,
                autoProceed: false,
                debug: true,
                restrictions: {
                    maxFileSize: false,
                    allowedFileTypes: ['image/*', 'application/pdf']
                },
                meta: {
                    modelClass: this.modelClass,
                    modelId: this.modelId,
                    collection: this.collection
                },
                onBeforeFileAdded: (currentFile, files) => Promise.resolve(),
                onBeforeUpload: (files, done) => Promise.resolve(),
            });
            if (this.collection === 'thumbnail') {
                uppy.use(Dashboard, {
                    trigger: '#open-thumbnail-modal',
                    metaFields: [
                        {id: 'owner', name: 'Owner', placeholder: 'name of the photographer/owner'},
                        {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'},
                        {id: 'order', name: 'Order', placeholder: 'order'},
                    ]
                })
            } else {
                uppy.use(Dashboard, {
                    inline: true,
                    target: '.DashboardContainer',
                    replaceTargetContent: true,
                    note: 'Images and PDF only.',
                    maxHeight: 500,
                    metaFields: [
                        {id: 'owner', name: 'Owner', placeholder: 'name of the photographer/owner'},
                        {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'},
                        {id: 'order', name: 'Order', placeholder: 'order'},
                    ]
                })
            }
            uppy.use(XHRUpload, {
                endpoint: this.endpoint,
                headers: {
                    'X-CSRF-TOKEN': window.csrfToken
                },
            })
            uppy.run();
        },

        methods: {}
    }
</script>

<style src="uppy/dist/uppy.css"></style>