How to Read Files with Vue
Apr 13, 2021
Using Vue's ref property, you can easily read files from <input>. By specifying input type to file and giving the <input> tag a ref property, you can pull the file into your methods and manipulate it as you deem fit. Here is the code to preview the selected image:
const app = new Vue({ data: () => ({ example: null, image: false, preview: null }), template: ` <div style="border-style:solid"> <input type="file" ref="file" @change="readFile()" /> <div v-if="Image"> <img :src="preview" /> </div> </div> `, methods: { readFile() { this.example = this.$refs.file.files[0]; if ( this.example.name.includes(".png") || this.example.name.includes(".jpg") ) { this.image = true; this.preview = URL.createObjectURL(this.example); } else { this.image = false; } } } });Here is a live demonstration:
File Reader
Using JavaScript's FileReader class, you can read the file and display it on the page.
const example = new Vue({ data: () => ({ file: null, content: null }), template: ` <div style="border-style:solid"> <input type="file" ref="doc" @change="readFile()" /> <div>{{content}}</div> </div> `, methods: { readFile() { this.file = this.$refs.doc.files[0]; const reader = new FileReader(); if (this.file.name.includes(".txt")) { reader.onload = (res) => { this.content = res.target.result; }; reader.onerror = (err) => console.log(err); reader.readAsText(this.file); } else { this.content = "check the console for file output"; reader.onload = (res) => { console.log(res.target.result); }; reader.onerror = (err) => console.log(err); reader.readAsText(this.file); } } } });Here is a live demonstration that will display the contents of a .txt file and print to the console the output for other types of files:
Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!