How to store FileList object inside Vue data

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:

this.file=e.target.files[0]

@change="fileChange($event)"

[object File]

1 Answer
1

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.

$event

fileChange()

$event.target

evt.target.files[0];

fileChange()

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/vue@2.5.17/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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.