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.


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.


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


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


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.

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

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


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() {
      img.src =;

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


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


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