Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Very basic vuejs usage of uppy
<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>
@kvz

This comment has been minimized.

Copy link

@kvz kvz commented Sep 3, 2020

Hi 👋 just wanted to mention have have an official Vue.js integration for Uppy in the works now. It's not to late to influence how it looks, so feel free to weigh in over at this PR transloadit/uppy#2500.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment