[VueJS] Refreshing when uploading a file


#1

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!


#2

Weird! My guess would be that somehow a submit event/post request is being triggered. Try adding @submit.prevent to any forms you have.


#3

I found the issue and it was my fault as usual!

I was uploading the files to the public directory of my app to make it easier, but then it generates an app reload as it’s changed. Pretty easy problem to solve in the end but in my tired state I couldn’t see it :smile: