• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

All About The HTML5 FileReader API

HTML5 · November 27, 2014

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.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz