Hi all,
I’ve encountered a strange bug with all of my Vue upload components.
I’m using Meteor-files, vue-supply and vuex each for certain parts of the app. Here’s an example of a component (in this case, the favicon upload):
<template>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label for="favicon-upload">Favicon (64x64)</label>
<div class="upload-area" v-on:click="faviconInput" v-bind:style="{ 'background-image': 'url(' + settings.appFavicon + ')' }">
<div class="upload-overlay"><i class="fas fa-plus"></i></div>
</div>
<input type="file" class="form-control-file" id="favicon" name="favicon-upload" @change="submitFavicon">
</div>
</div>
</template>
<script>
// Imports
import { use } from 'vue-supply';
import { mapGetters } from 'vuex';
import sanitizeHtml from 'sanitize-html';
import Images from '/imports/api/files';
export default {
mixins: [
use( 'Settings' ),
use( 'Images' ),
],
computed: {
images() {
return this.$supply.Images.images
},
...mapGetters({
settings: 'settings/settings',
})
},
methods: {
submitFavicon: function( event ) {
// Settings ID
const id = this.settings._id;
// Image upload
if( event.currentTarget.files && event.currentTarget.files[0] ) {
const upload = Images.insert({
file: event.currentTarget.files[0],
streams: 'dynamic',
chunkSize: 'dynamic'
}, false);
upload.on('end', function(error, fileObj) {
if (error) {
window.alert('Error during upload: ' + error.reason);
} else {
// favicon path
const clanFavicon = fileObj.path;
settings = {
id: id,
favicon: clanFavicon
}
Meteor.call( 'faviconUpload', settings, (err) => {
if( err ) {
console.log( err );
} else {
console.log( 'Settings Updated' );
}
});
}
});
upload.start();
}
},
faviconInput: function( ) {
const fileInput = document.querySelector( '#favicon' );
fileInput.click();
}
}
}
</script>
<style lang="scss" scoped>
.form-control-file {
display: none;
}
.upload-area {
width: 50%;
padding: 25%;
cursor: pointer;
border: 6px dashed #ccc;
color: #ccc;
position: relative;
transition: .2s ease all;
background-position: center center;
background-repeat: no-repeat;
background-size: 50%;
&:hover {
border: 6px dashed #aaa;
color: #aaa;
}
.upload-overlay {
width: 50%;
height: 50%;
text-align: center;
font-size: 60px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
svg {
margin-top: 50%;
transform: translateY( -50% );
}
}
@media( max-width: 996px ) {
width: 100%;
padding: 50%;
}
}
</style>
The Meteor method for the upload is pretty simple:
faviconUpload: function( upload ) {
if( !Meteor.userId() ) {
console.log( 'Not allowed to update the favicon!' );
return;
} else {
Settings.update( upload.id,
{ $set: {
appFavicon: upload.favicon
}
});
}
}
The image is being uploaded fine. It’s also being added to the settings collection and the Images collections without issue as well. However, about a second after the upload, the whole page refreshes. This is when running meteor normally or with the --production flag.
I’m pretty stumped and this isn’t the desired effect for my app. Any help would be greaty appreciated!
