How to use the File Reader API

HTML5 has brought a lot of new features to HTML and whilst we all concentrate on the big advances like canvas, and audio & video, some of the simpler improvements get overlooked.

This is the case with the File Reader API, which although not glamorous, is an excellent addition to our toolbox.

In terms of browser support the File Reader API is supported by everything modern with the exception of Opera Mini, so you can be confident using it right now.

What this new API does is read the contents of a file on your hard drive, telling you things like the size, read the contents if it’s a text file, or generate a thumbnail if it’s an image.

In this article we’ll try it out by creating a file reader.

Creating a text reader

The API provides a large number of asynchronous methods, which means you can run them and they won’t slow down your interface.

We’re going to use the readAsText method, which takes 2 parameters, the first being the file you want to read and the second one being the encoding of the file (UTF-8 will be assumed if the 2nd is omitted).

First we need to add the HTML to interact with:

<h1>Text File Reader</h1>
Let us read your text file:
<input type="file" id="textread">
<pre id="displaytext"></pre>

Next, we go back to our script and add and event listener to the file input so we know when a file is chosen. Then we define two variables, one is the file, and the other is the file type for which we’ll use a regular expression:

$('#textread').change(function(e) {
var file = $('#textread').get(0).files[0];
var type = /text.*/;

Next we need to check that the selected file is a text file. Assuming it is, we create a new FileReader, and add an onload event handler. After that we can finally use the readAsText method, passing in the selected file:

if (file.type.match(type)) {
var reader = new FileReader();
reader.onload = function(e) {
$('#displaytext').text(reader.result);
}
reader.readAsText(file);
}

The last thing we need is a warning message in case the file isn’t a text file:

else {
$('#displaytext').text("This is not a text File");
}
});

You can view a demo here

Creating a thumbnail generator

Now that we have that working, let’s move on to something a little more advanced: building a thumbnail generator. We’ll use exactly the same HTML as before, we’ll just change the IDs.

As with the text reader, we start by setting up an event handler, ensuring that we’re using the correct ID:

$('#imgread').change(function(e) {
var file = $('#imgread').get(0).files[0];
var imageType = /image.*/;

Next, we create a new instance of the FileReader as before, but it’s with the onload function that things change. First we create a new image instance, then set its src to be the result of the reader.

Once that’s done, all we need to do is insert the image in the page:

if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = reader.result;
$('#displayimg').html(img);
}
reader.readAsDataURL(file);
}

As with the previous example, it’s important that we include an error message in case the file selected isn’t an image:

else {
$('#displayimg').text('Not an Image');
}
});

Testing this code you’ll see that it creates a full sized image. To create a thumbnail, all we need to do is add this to our CSS:

img {
height: 150px;
}

Our code for this genartor is complete , if you would like to see a demo you can see it here.

Conclusion

This API has a variety of uses, but the most common usage is to allow people to see the files they’re working with as more than just filenames. Something that’s very useful as we start to build full-blown web apps.

 

Have you used the File Reader API? What’s its most useful feature? Let us know your thoughts in the comments.

SHARE THIS POST