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 or filereader.min.js if you are in a hurry.

If you've got some time to look around, check out the annotated source code!

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!

Usage

There is no jQuery or any other library dependancy for FileReader.js. It will work with a simple call to 

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

var opts = {
    dragClass: "drag",
    accept: false,
    readAsMap: {
        'image/*': 'DataURL',
        'text/*' : 'Text'
    },
    readAsDefault: 'BinaryString',
    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) {

    	},
        groupend: function(group) {

    	}
    }
};

FileReaderJS.setupInput(document.getElementById('file-input'), opts);
FileReaderJS.setupDrop(document.getElementById('dropzone'), opts);
FileReaderJS.setupClipboard(document.body, opts);

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

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

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!

Resources

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