Hello im trying to store a FileList object inside vue data object but it's being stored as string "File"
Im adding a ref to html like this
<input type="file" @change="fileChange($event.target)">
And in the javascript
new Vue({
el: '#someEl',
data: {
file: null
},
methods: {
fileChange (file) {
this.file = file.files[0]
}
}
})
As a result i get this:
You need to just pass argument $event to fileChange() instead of $event.target.
Now you can access file object using evt.target.files[0]; inside fileChange() function.
var vm = new Vue({
el: '#app',
data: {
file: {}
},
methods: {
fileChange (evt) {
this.file = evt.target.files[0];
console.log('file Object:==>',this.file);
}
}
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>
<div id="app">
<p>
<input type="file" @change="fileChange($event)">
name: <b>{{file.name}}</b>
</p>
<p>
size: <b>{{file.size}} </b>
& type: <b>{{file.type}}</b>
</p>
</div>
this.file=e.target.files[0]&@change="fileChange($event)"should work[object File]would be more expected here). Also, notpicking, but it is a File objevt you are trying to store here. The FileList is the object above.