Tutorial
Creating a Vue.js File Reader Component Using the FileReader API
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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:
<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 🦄