Question
Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so:
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
However, when converting it to the 'Vue' way it doesn't seem to work as intend
and simply returns undefined
instead of returning an Array of File objects.
This is how it looks in my Vue template:
<input type="file" id="file" class="custom-file-input"
v-on:change="previewFiles(this.files)" multiple>
Where the previewFiles
function is simply the following (located in
methods):
methods: {
previewFiles: function(files) {
console.log(files)
}
}
Is there an alternate/correct way of doing this? Thanks
Answer
Another solution:
<input type="file" @change="previewFiles" multiple>
methods: {
previewFiles(event) {
console.log(event.target.files);
}
}