Uppy Dashboard options not being centered in VueJS
The options in the Uppy Dashboard when displayed are being displayed left aligned instead of it being display in center which we thought was the default behavior. Also, how can we customize the classes - '@uppy/core/dist/style.css' and '@uppy/dashboard/dist/style.css'.
Please see screenshot attached and the code used below.
<template>
<span>
<slot :open="open"></slot>
<b-modal id="bv-modal-example" hide-footer>
<dashboard :uppy="uppy" :plugins="['Webcam','GoogleDrive']" :props="{theme: 'dark'}" />
</b-modal>
</span>
</template>
<script>
import { Dashboard } from '@uppy/vue'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import GoogleDrive from '@uppy/google-drive'
let fileNames = []
export default{
name: 'App',
components: {
Dashboard
},
computed: {
uppy: () => new Uppy({restrictions: {maxFileSize: 1000000,maxNumberOfFiles:5,allowedFileTypes: ['.pdf','.docx']}}).use(
Webcam,
GoogleDrive, {
target: Dashboard,
companionUrl: 'https://companion.uppy.io/',
}
)
.on('complete', (result) => {
for( var i = 0; i < result.successful.length; i++ ) {
console.log(result.successful[i].name)
let fileN = {
"name": result.successful[i].name,
"type": result.successful[i].meta.type
}
fileNames.push(fileN);
}
})
},
beforeDestroy () {
this.uppy.close()
},
methods:{
open:function(){
this.$bvModal.show('bv-modal-example')
},
remove(key){
this.file.splice( key, 1 );
}
}
}
</script>
The above code is displayed on click of a button
<kr-file v-slot="{open}" @uploaded="create">
<b-button pill variant="warning" @click="open()"> <i class="ion ion-md-cloud-upload
mr-2"></i>Upload</b-button>
</kr-file>
Updated 2022-01-14 08:14:14Z by
Venkatesh Prasad
Tags:
vue.jsvue.js tutorialvue.js vs reactvue.js devtoolsvue.js not detectedvue.js examplesvue.js vs angularvue.js watchvue.js propsvue.js interview questionsvue file uploadvue filevue file inputvue file structurevue file upload componentvue file naming conventionsvue file upload examplevue file agentvue file extensionvue file structure best practicesvue upload filevue upload imagevue upload componentvue upload multiple filesvue upload to s3vue upload image to servervue uploadvue upload buttonvue upload file axiosvue upload csvvue uppyvue uppy exampleuppy vue 3