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 TextReader from "./TextReader"; export default { name: "app", data: () => ({ text: "" }), components: { TextReader } }; </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 🦄