// Tutorial //

Creating a Vue.js File Reader Component Using the FileReader API

Published on March 19, 2018
Default avatar
By Alex Jover Morales
Developer and author at DigitalOcean.
Creating a Vue.js File Reader Component Using the FileReader API

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Sometimes we need to read data from files. In old times, you’d need to send it to a server and for it to then return the data needed. The thing is, nowadays we can also access files directly in the browser using the FileReader API.

If we just want to read a text file in order to do something trivial with it at the UI level, we don’t need to send the file to the server. An example could be filling a textarea from a file.

The FileReader API

The FileReader API gives a nice interface to read data in different ways using the File or Blob object types.

The FileReader instance has a readAsText method that we can use to read a file as text:

const reader = new FileReader();
reader.readAsText(file);

Since the FileReader API is asynchronous, it exposes several events that we can use to get its state. In particular, we’ll need the onload event to access the data when the file has been read:

const reader = new FileReader();
reader.onload = e => console.log(e.target.result);

reader.readAsText(file);

As you can see, the text data is accessible via e.target.result.

File Reader Component

The previous code already reads a file, but we still have to give it the file object. For that, we must use an <input type="file"> HTML tag, that triggers a change event where we can access the file via ev.target.files.

Let’s create a FileReader.vue component putting it all together:

FileReader.vue
<template>
  <label class="text-reader">
    <input type="file" @change="loadTextFromFile">
  </label>
</template>

<script>
export default {
  methods: {
    loadTextFromFile(ev) {
      const file = ev.target.files[0];
      const reader = new FileReader();

      reader.onload = e => this.$emit("load", e.target.result);
      reader.readAsText(file);
    }
  }
};
</script>

The component is emitting a load event so that the parent component can handle the data.

Using the Component

Given that you have an App.vue component already setup, let’s use it to demo our component:

App.vue
<template>
  <div id="app">
    <textarea rows="10" v-model="text"></textarea>
    <br>
    <text-reader @load="text = $event"></text-reader>
  </div>
</template>

<script>
import FileReader from "./FileReader";

export default {
  name: "app",
  data: () => ({ text: "" }),
  components: {
    FileReader
  }
};
</script>

We need to add a text data property, and as an example bind it to a text area using v-model. Finally, we’re capturing the @load event and setting the text property to the event payload via $event.

Bonus: Styling the File Button

The <input type="file"> tag is rendered differently in each browser. If we want to have a custom style, we can hide it and style its <label> tag instead.

To hide the input, use the opacity: 0; css property. Using display: block; or visibility: hidden; will break its accessibility.

We also need a combination of positioning and z-index in order to put it behind the label:

FileReader.vue
<template>
  <label class="text-reader">
    Read File
    <input type="file" @change="loadTextFromFile">
  </label>
</template>

<style>
.text-reader {
  position: relative;
  overflow: hidden;
  display: inline-block;

  /* Fancy button style 😎 */
  border: 2px solid black;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
}
.text-reader input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}
</style>

That should do the trick, and the input file button should work perfectly

You can see the code and a demo in this Codesandbox.

Stay cool 🦄

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!