Vuejs Dropzonejs in Laravel App - development

Vuejs Dropzonejs in Laravel App

I am trying to implement this vuejs dropzonejs tool to make an Image uploaded in my laravel form.
So far I created a ImageDropzoneComponent.vue file inside resources/assets/js/components

The Code inside the component:

<template>
    <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

export default {
    name: 'app',
    components: {
        vueDropzone: vue2Dropzone
    },
    data: function() {
        return {
            dropzoneOptions: {
                url: 'https://httpbin.org/post', // Need to Change route
                thumbnailWidth: 150,
                maxFilesize: 2,
                maxFiles: 1,
                autoProcessQueue: false,
                dictRemoveFile: "x",
                dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>Upload an image",
                acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
                headers: {'X-CSRF-TOKEN' : $('meta[name="token"]').attr('value')},
            }
        }
    }
}
</script>

I add the component in my appjs file like this:

Vue.component('vue-dropzone', require('./components/ImageDropzoneComponent.vue'));

And in my blade file I call it like this:

If the user submits the form I want to upload the Image and save the other Input stuff so I deactivated the autoprocessing.

But how do I upload and save the Image in Addition to the other Input?

Blade.php:

<div class="field">
    <label class="label">Title</label>
    <div class="control">
        <input class="input" type="text" name="title" placeholder="Title" v-model="title">
    </div>
</div>

<vue-dropzone></vue-dropzone>

<div class="field is-grouped">
    <div class="control">
        <button type="submit" class="button is-primary"
                :class="{ 'is-loading': loading }"
                @click="createGame">Create</button>
    </div>
    <div class="control">
        <button class="button is-text">Cancel</button>
    </div>
</div>

If I click on the “submit” button I call this axios method:

const app = new Vue({
    el: '#app',

    data: {
        loading: false,
        createStatus: false,
        title: '',
        description: '',
        releasedAt: ''
    },

    methods: {
        createGame (e) {
            this.loading = true;
            axios.post('/games',  {
                title: this.title,
                image: this.image, // how to add Image here?

            })
            .then((response) => {
                self.loading = false;
                console.log(response.data);
            })
            .catch((error) => {
                self.loading = false;
                console.log(error);
            })
        },

        // image upload stuff
        uploadImage () {
            this.$refs.myVueDropzone.processQueue()
        }

    }
});

And this is how I save the data on my Server side (Controller):

public function store(Request $request) {
    $data = $request->all();

    $game = $this->game->create([
        'title' => $request->title,
        'image' => $request->image,//???
    ]);

    return 'Success';
}

Saving Input data works fine I just do not get how to upload and save the Image.

from Laravel Questions and Answers https://laravelquestions.com/php/vuejs-dropzonejs-in-laravel-app/
via Lzo Media