Read Files In The Browser

FileReader.js is intended to make accessing files via the FileReader interface easier. Read more about the motivation behind filereader.js.

No Dependancies

FileReader.js does not require any other libraries. If you do use jQuery, there is a small plugin wrapping up the functionlity though!

Source Code

Or you can jump straight to the filereader.js if you are in a hurry.

Demonstration

There are three ways to accept input - you can pick and choose any of these.

• File Input

  You can access files that users select via an input[type=file]. Try it out below:

• Drop Zone

  Drag and drop files from your desktop here (or select them from the input above).
  They will be read in browser.
  

• Clipboard

  In some browsers, you can paste images onto a page. Go ahead and 'print screen' then press Ctrl+V to try that out!

  Doesn't work in Firefox (as of version 30). Follow this Firefox bug for progress on implementation.

Usage

There is no jQuery or any other library dependancy for FileReader.js.

Markup

Usage

You don't need any other libraries. It can be called after adding the script with:

If you use jQuery, you could use it as such:

Options

Simple Example

Ready to get started? Here is a sample that reads all files dropped on the body as data URLs. You can also check out this sample on jsfiddle.

Browser Support

• Internet Explorer: 10+
• Firefox: 10+
• Chrome: 13+
• Opera: 12+
• Safari: partial

For more information, see the Full Browser Support Graph for File API

Samples

Some sites have already implemented FileReader.js - check out their code to get an idea of how it is being used! Gv usb2 linux driver.

• mothereffinganimatedgif - source code.
• Instant Sprite CSS Sprite Generator - source code.

Resources

I found a lot of information while implementing this plugin. Here are some resources that helped: