Tutorial

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

Published on March 19, 2018
Default avatar

By Alex Jover Morales

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 🦄

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alex Jover Morales

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel