Tutorials / Vue /

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!

How to Read Files with Vue

File Reader

More Vue Tutorials