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

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:

<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:

<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:

<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 🦄