I have a simple form with a file upload and a text input as below:
<form v-on:submit.prevent="createStatus" method="post" enctype="multipart/form-data">
<div class="Image-input__input-wrapper">
<input @change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file">
</div>
<div v-bind:class="{'form-group': true, 'has-error': errors.description}">
<label>Status Description:</label>
<input type="text" class="form-control" v-model="newStatus.description">
<span class="help-block" v-for="error in errors.description">{{ error }}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save New Status</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
On selecting a file the image is previewed using the previewThumbnail method.
previewThumbnail: function(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
var vm = this;
reader.onload = function(e) {
vm.imageSrc = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
console.log(input.files[0]);
this.newStatus.image = input.files[0];
console.log(this.newStatus.image);
},
In the console I get the file data. I then need this data to be passed on submit to the laravel controller but the file data doesn't make it to the submit function. The createStatus method below is called on form submit, when returning the response the newStatus.image that was passed to the url is empty.
createStatus(){
var formData = new FormData();
formData.append('image', this.newStatus.image);
formData.append('description', this.newStatus.description);
axios.post('/api/statuses', formData).then(response => {
console.log(response.data);
}, response => {
this.formErrors = response.data;
});
},
Have I missed something in the submit function?
