Menu
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
214
The v-model directive in Vue creates a two-way binding on the input element. All you need to do is simply declare a v-model directive for the input element and reference it to get the value. Every time the input value changes, “myInput” model will keep track of the changes.
The only way to set the value of a file input is by the user to select a file. This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer.
VUE file extension is mainly associated with single file components used by Vue, an open-source, frontend JavaScript framework for building user interfaces. Such VUE single-file components are modules containing source code (typically for a single UI component) which can be exported or reused in a Vue application.
Another solution:
<input type="file" @change="previewFiles" multiple> methods: { previewFiles(event) { console.log(event.target.files); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
