Problems uploading images with Laravel 5.4 and Vue 2

We're building an image upload feature for an application written in Laravel 5.4 and Vue 2.

In the Vue Component, we have:

<form class="form" enctype="multipart/form-data">
    <input type="hidden" name="_token" v-bind:value="form.csrf">
    <div class="row">
        <div class="col-md-6">
            <input type="file" id="uploadFile" @change="getImage" accept="image/*">
        </div>
        <div class="col-md-6">
            <button class="btn btn-default" @click="uploadImage($event)">Upload Image</button>
        </div>
    </div>
</form>

The CSRF value of form.csrf is valid, matching what we have in the meta tag.

We're using the following methods:

getImage: function (event) {
    var reader = new FileReader();
    var instance = this;
    reader.onload = function(e) {
        instance.images.data = e.target.result;
    };
    reader.readAsDataURL(event.target.files[0]);
},
uploadImage: function (event) {
    event.preventDefault();

    console.log(this.images.data);

    var data = {
        photo: this.images.data,
        _token: this.form.csrf
    };

    /*$.post( "/intervention-resizeImage", data, function( data ) {
    }).done(function() {
        Vue.swal({
            title: "Success!",
            text: "Your request has been sent.",
            type: 'success',
            timer: 3000
        });
    }).fail(function(xhr, status, error) {
        Vue.swal({
            title: "Error!",
            text: "There was an error: " + error,
            type: 'error'
        });
    });*/

    $.ajax({
        url: "/intervention-resizeImage",
        dataType: 'text',
        type: 'post',
        contentType: 'multipart/form-data',
        data: data,
        success: function( data, textStatus, jQxhr ){
            Vue.swal({
                title: "Success!",
                text: "Your request has been sent.",
                type: 'success',
                timer: 3000
            });
        },
        error: function( jqXhr, textStatus, errorThrown ){
            Vue.swal({
                title: "Error!",
                text: "There was an error: " + errorThrown,
                type: 'error'
            });
        }
    });

}

We appear to be generating valid data: data:image/png;base64,iVBORw0KGgoAAAA..., but when we send the data to the controller, we get:

TokenMismatchException in VerifyCsrfToken.php (line 68)

If we switch to $.post() we get a bit further, this time into the controller:

$this->validate($request, [
    'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:1024'
]);

But then we get another error:

photo: [ 0: "The photo must be an image." 1: "The photo must be a file of type: jpeg, png, jpg, gif, svg." 2: "The photo may not be greater than 1024 characters." ]

We've tried various approaches to including the CSRF value, passing it, encoding the data, but nothing has worked so far.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2zFAV3N
via IFTTT