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!