Skip to content

Instantly share code, notes, and snippets.

@pooot

pooot/uppy-vue-example

Created January 2, 2018 15:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pooot/a2f86e6847a8be51fb2e3672a00a905f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pooot/a2f86e6847a8be51fb2e3672a00a905f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pooot created this gist Jan 2, 2018.
    102 changes: 102 additions & 0 deletions uppy-vue-example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,102 @@
    <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>