FileReader.js - Read Files with JavaScript!

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

View Project On Github

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.

Usage

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

Markup

<script type='text/javascript' src='filereader.js'></script>

Usage

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

// Accept files from the specified input[type=file]
FileReaderJS.setupInput(document.getElementById('file-input'), options);

// Accept dropped files on the specified file
FileReaderJS.setupDrop(document.getElementById('dropzone'), options);

// Accept paste events if available
FileReaderJS.setupClipboard(document.body, options);

// Attempt to use FileReaderSync in a worker if available.
FileReaderJS.setSync(true/false);

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

$("#file-input, #dropzone").fileReaderJS(opts);
$("body").fileClipboard(opts);

Options

var options = {
  // CSS Class to add to the drop element when a drag is active
  dragClass: "drag",

  // A string to match MIME types, for instance
  accept: false,

  // An object specifying how to read certain MIME types
  // For example: {
  //  'image/*': 'DataURL',
  //  'data/*': 'ArrayBuffer',
  //  'text/*' : 'Text'
  // }
  readAsMap: { },

  // How to read any files not specified by readAsMap
  readAsDefault: 'DataURL',
  on: {
    beforestart: function(e, file) {
        // return false if you want to skip this file
    },
    loadstart: function(e, file) { /* Native ProgressEvent */ },
    progress: function(e, file) { /* Native ProgressEvent */ },
    load: function(e, file) { /* Native ProgressEvent */ },
    error: function(e, file) { /* Native ProgressEvent */ },
    loadend: function(e, file) { /* Native ProgressEvent */ },
    abort: function(e, file) { /* Native ProgressEvent */ },
    skip: function(e, file) {
      // Called when a file is skipped.  This happens when:
      //  1) A file doesn't match the accept option
      //  2) false is returned in the beforestart callback
    },
    groupstart: function(group) {
      // Called when a 'group' (a single drop / copy / select that may
      // contain multiple files) is receieved.
      // You can ignore this event if you don't care about groups
    },
    groupend: function(group) {
      // Called when a 'group' is finished.
      // You can ignore this event if you don't care about groups
    }
  }
};

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.

FileReaderJS.setupDrop(document.body, {
  readAsDefault: "DataURL",
  on: {
    load: function(e, file) {
      var img = new Image();
      img.onload = function() {
        document.body.appendChild(img);
      };
      img.src = e.target.result;
    }
  }
});

Browser Support

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

Samples

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

• 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:

• FileReader specification
• FileReaderSync specification
• File API Event Handler specification
• Full Browser Support Graph for File API