FileReader API

By  on  

As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does anything it can to display an image with any user upload.

One thing I hated about working with user-provided files was having to host them on a server somewhere:  the uploaded files take up disk space and in some cases become a security concern....until now.  The FileReader API allows you to access user files and their content from their machine without needing to upload to your server.

The HTML

The FileReader API works off of the File API premise and thus requires a input[type="file"] element:

<-- Let's go big and enable for multiple file uploads -->
<input type="file" id="upload-file" multiple />

<-- We'll display the image in this DIV -->
<div id="destination"></div>

Read my File API post to learn more about what it provides, like location, size, type, and more.

The JavaScript

This example calls for an image to be chosen within the input; once an image is chosen by the user on their machine, the image is to be displayed on the page:

document.getElementById('upload-file').addEventListener('change', function() {
	var file;
	var destination = document.getElementById('destination');
	destination.innerHTML = '';

	// Looping in case they uploaded multiple files
	for(var x = 0, xlen = this.files.length; x < xlen; x++) {
		file = this.files[x];
		if(file.type.indexOf('image') != -1) { // Very primitive "validation"

			var reader = new FileReader();

			reader.onload = function(e) {
				var img = new Image();
				img.src = e.target.result; // File contents here

				destination.appendChild(img);
			};
			
			reader.readAsDataURL(file);
		}
	}
});

This example uses FileReader's readAsDataURL method to convert the file contents to a base64-encoded string which can be used as an image data URI for the src attribute.  Other FileReader read types include readAsText, readAsArrayBuffer, and readAsBinaryString.

With this API you can avoid server uploads of raw user files, which I love.  You can also pre-treat content before you manually upload user content to your servers.  An example of where this is used is the smartcrop.js testbed.  Please share other ideas for usage if you have them!

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

Discussion

  1. Daniel k

    How’s browser support looking for this Api?

  2. James

    Data URLs have a size limit, wouldn’t this impede larger uploads?

    A possibly better solution is to use URL.createObjectUrl which can take the file directly and provide a URL for it, falling back to data URLs if unsupported.

  3. Tolga

    I’d been looking for this all along. It’s good that I checked the article :)

  4. The demo doesn’t work on smartphone!

    Nexus 5 with native chrome browser and Android 6.0.

  5. Mohamed hussain

    I found in depth file api in nicholas zakas blog…but still not useful in case of invalid server validation….and large file upload

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!