Vue - how to get a file to a hidden input field - vue.js

Question

I am currently previewing an image, but would also like to actually return somehow the file to my form, so that I can later submit it in the backend, but not sure how to do that?
This is my component:
<template>
<div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" #change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<button #click="removeImage">Remove image</button>
<input type="file" v-bind:value="{ file }" style="display:none">
</div>
</div>
</template>
<script>
export default {
data() {
return {
image: '',
formData:new FormData()
}
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
this.formData.append('file', files[0]);
},
createImage: function createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function (e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function removeImage(e) {
this.image = '';
}
}
}
</script>
I have tried with adding formData:new FormData() to data function and then appending the file to formData object like this:
this.formData.append('file', files[0]);
But I get an error:
formData is not defined

Answer 1

Hi I think the error caused by v-bind:value="{ file } , you should remove it, and it will work:
<input type="file" style="display:none">
You can't use v-model = "file" to get the file data, and what you have done with this.formData.append('file', files[0]); is the right way to get the data, if you want to get the data in the scope of your components, you can do something like this:
data() {
return {
image: '',
formData:new FormData(),
file: null
}
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
this.formData.append('file', files[0]);
this.file = files[0];
}
....
reference:
https://laracasts.com/discuss/channels/vue/vuejs-using-v-model-with-input-typefile?page=1
http://codepen.io/Atinux/pen/qOvawK/