Since the recent announcement of HTML5 being finalised, we can finally talk about all of the awesome additions to HTML5 without fear of them changing. Once such addition to HTML5 is the FileReader API which allows you to work with files locally on a hard drive.
The FileReader API is seriously undervalued and surprisingly a few developers I have spoken with who know about it, have not used it or assumed that it was not really supported and thus, ignored it. And some others have not heard about it at all.
Some use cases for the FileReader API include:
- Allowing the user to upload a gallery of images within your web application and being able to show them an instant thumbnail preview before the files are uploaded to the server
- Avatar image upload and cropping functionality all on the client-side. A user can upload an avatar image, see the image they uploaded and then crop it before the cropped version is sent off to the server
- Profile image upload functionality
Support is surprisingly decent. It works in all modern browsers and also in IE10 and up. There is however a polyfill for < IE10 which uses Flash, but still allows you to use FileReader (albeit not as intended).
The FileReader API also supports a whole bunch of events for errors, progress, changes and more. Methods for cancelling file uploads, getting the contents of an uploaded file (image or text file contents) and the usual methods/events you would expect from a fully featured FileReader API.
Traditionally you would handle a lot of these tasks using something like Flash and server side processing. Now that the FileReader API is more widely supported, we can phase out solutions that rely on Flash and heavy server-side processing (as you know processing files server-side can be costly).
You can read up on the FileReader API here on Mozilla Docs. You can also see a whole bunch of examples here on Mozilla Docs as well which show it working with drag and drop functionality as well.
