Using the FileReader API (base 64 conversion in-browser)

Until recently, I had never needed to read files in on a webpage. Usually, it is more than enough to create an <input> tag with the type of a file and send it on its way to a server to be processed or stored. With the rise of single page app, I've found it quite useful to use the relatively new FileReader API. It's great for preprocessing files before sending them off and, in some cases, avoiding a trip to the server all together.

As a simple but useful example, I wrote a base 64 conversion utility. You can choose any file from your local machine, the browser will read it in as base 64 (via the reader.readAsDataURL() method), and it will display the result. I was surprised at the efficiency of it in modern browsers. It can handle converting very large files in a manner of seconds.