<meta charset="utf-8" />

<title>FileReader.js</title>

<link rel="stylesheet" href="demo/bootstrap.css" />

<style type='text/css'>

html, body { background-color: #eee; }

body { padding-top: 15px; background: url(demo/light_toast.png); }

#sidebar

{

left:auto;

right:20px;

width:260px;

position:fixed;

min-height: 40px;

overflow-y: auto;

background: white;

top: -10px;

bottom: -10px;

margin: 0;

border: solid 2px #333;

box-shadow: 0 0 10px #999;

}

#sidebar.drag

{

background: #f9b660;

}

.offset1 {

margin-left: 60px;

}

.offset2 {

margin-left: 80px;

}

.container-fluid > .content{ margin-right:340px; margin-left:0;}

#dropzone { padding:20px; border: solid 3px #050; text-align: center;}

#dropzone.drag { border: solid 3px #0f0; }

#file-list + small { display:none; }

#file-list:not(:empty) + small { display:block; }

#file-list:empty:before { content: "Add a file using one of the methods to the left and it will show up here."; display:block; }

#file-list { margin: 2px; }

#file-list li { margin:10px 0; list-style: none; }

#file-list li > img { max-width: 30px; max-height: 20px; margin-right: 3px; }

#file-list li .modal img { max-width: 400px; max-height: 400px; }

#file-list li.error { color: red; }

#file-list li.error a.btn { display:none; }

#file-list .group { font-size:1.1em; color:#666; border-bottom: dashed 1px #999; }

#file-list pre { margin:20px 0; border: solid 2px #8d8; display:none; }

#file-list pre.done { border-color: #8d8; }

.arrow_box {

position: relative;

background: #ffffff;

border: 2px solid #333;

}

.arrow_box:after, .arrow_box:before {

left: 100%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

}

.arrow_box:after {

border-left-color: #ffffff;

border-width: 30px;

top: 50%;

margin-top: -30px;

}

.arrow_box:before {

border-left-color: #333;

border-width: 33px;

top: 50%;

margin-top: -33px;

}

.row p {

margin-bottom: 12px;

}

.row h2 {

margin: 10px 0;

}

#demo {

list-style-type: none;

border-radius: 5px;

margin-right: -7px;

padding: 15px;

}

#sync + strong {

color: #dec857;

}

#async + strong {

color: #7bde57;

}

body:after {

content: "";

display:block;

position:fixed;

top: -50px;

padding: 2px;

border-radius: 50%;

right:-50px;

width: 100px;

height: 100px;

background: #7bde57;

}

body.sync:after {

background: #dec857;

}

.done .filename { color: #357048; }

.done .not-done { display:none; }

.on-done { display:none; }

.done .on-done { display: inline-block; }

</style>

<div class="container-fluid">

<div class="content">

<div class="page-header">

<h1><a href='http://bgrins.github.com/filereader.js/'>FileReader.js</a> <small> - Read Files with JavaScript!</small></h1>

</div>

<div class="row">

<div class="offset1">

<h2>Read Files In The Browser</h2>

<p>

FileReader.js is intended to make accessing files via the <a href='http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface'>FileReader interface</a> easier.

Read more about <a href='http://www.briangrinstead.com/blog/filereaderjs'>the motivation behind filereader.js</a>.

</p>

</div>

</div>

<div class="row">

<div class="offset1">

<h2>No Dependancies</h2>

<p>

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

</p>

</div>

</div>

<div class="row">

<div class="offset1">

<h2>Source Code</h2>

<p>

<a class='btn btn-large btn-primary' href='http://github.com/bgrins/filereader.js'>View Project On Github</a>

</p>

<p>

Or you can jump straight to the

<a href='https://raw.github.com/bgrins/filereader.js/master/filereader.js'>filereader.js</a>

if you are in a hurry.

</p>

</div>

</div>

<div class="row">

<div class="offset1">

<h2>Demonstration</h2>

<p>There are <strong>three ways</strong> to accept input - you can pick and choose any of these.</p>

</div>

</div>

<div class="row">

<ul id='demo' class='offset2 arrow_box'>

<li class=''>

<h3>File Input</h3>

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

<form id='file-form' method="post" enctype="multipart/form-data">

<input type="hidden" name="extra-data" multiple />

<input type="file" id="file-input" name="file-input" multiple />

</form>

</li>

<li class="">

<h3>Drop Zone</h3>

<p id='dropzone'>

Drag and drop files from your desktop here (or select them from the input above).<br />

They will be read in browser.<br />

<img src='demo/arrow.png' width='50' /><br />

</p>

</li>

<li class="">

<h3>Clipboard</h3>

<p>

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

</p>

<p>

Doesn't work in Firefox (as of version 30). Follow <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=891247">this Firefox bug</a> for progress on implementation.

</p>

</li>

</ul>

</div>

<div class="row">

<div class="offset1">

<h2>Usage</h2>

<p>

<strong>There is no jQuery or any other library dependancy for FileReader.js</strong>.

<h3>Markup</h3>

<pre class="prettyprint">

&lt;script type='text/javascript' src='filereader.js'&gt;&lt;/script&gt;

<h3>Usage</h3>

<p>

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

</p>

<pre class="prettyprint">

// 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/<strong>false</strong>);

<p>

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

</p>

<pre class="prettyprint">

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

$("body").fileClipboard(opts);

<h3>Options</h3>

<pre class="prettyprint">

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

}

}

};

<h3>Simple Example</h3>

<p>

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 <a href="http://jsfiddle.net/bgrins/nWP59/">sample on jsfiddle</a>.

</p>

<pre class="prettyprint">

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;

}

}

});

</div>

</div>

<div class="row">

<div class="offset1">

<h2>Browser Support</h2>

<p>

<ul>

<li>Internet Explorer: <span class='label label-success'>10+</span></li>

<li>Firefox: <span class='label label-success'>10+</span></li>

<li>Chrome: <span class='label label-success'>13+</span></li>

<li>Opera: <span class='label label-success'>12+</span></li>

<li>Safari: <span class='label label-warning'>partial</span></li>

</ul>

For more information, see the <a href='http://caniuse.com/#feat=fileapi'>Full Browser Support Graph for File API</a>

</p>

</div>

</div>

<div class="row">

<div class="offset1">

<h2>Samples</h2>

<p>

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

<ul>

<li>

<a href='http://mothereffinganimatedgif.com/'>mothereffinganimatedgif</a> - <a href='https://github.com/h5bp/mothereffinganimatedgif/'>source code</a>.

</li>

<li>

<a href='http://instantsprite.com/'>Instant Sprite CSS Sprite Generator</a> - <a href='https://github.com/bgrins/InstantSprite'>source code</a>.

</li>

</ul>

</p>

</div>

</div>

<div class="row">

<div class="offset1">

<h2>Resources</h2>

<p>

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

<ul>

<li>

<a href='http://www.w3.org/TR/FileAPI/#dfn-filereader'>FileReader specification</a>

</li>

<li>

<a href='http://www.w3.org/TR/FileAPI/#FileReaderSync'>FileReaderSync specification</a>

</li>

<li>

<a href='ttp://www.w3.org/TR/FileAPI/#event-handler-attributes-section'>File API Event Handler specification</a>

</li>

<li>

<a href='http://caniuse.com/#feat=fileapi'>Full Browser Support Graph for File API</a>

</li>

</ul>

</p>

</div>

</div>

</div>

<div class="sidebar well" id="sidebar">

<h4>Demo - Loaded Files </h4>

<hr />

<p>

<form class='form'>

<fieldset>

<div class='controls'>

<label class="radio"><input type='radio' name='load-type' id='sync' /> <strong>Sync</strong> - Using <a target='_blank' href='http://www.w3.org/TR/FileAPI/#FileReaderSync'>FileReaderSync</a></label>

<label class="radio"><input type='radio' name='load-type' id='async' checked='checked' /> <strong>Async</strong> - Using FileReader</label>

</div>

</fieldset>

</form>

</p>

<hr />

<ul id='file-list'></ul>

<small><a href='#' id='clear-list'>clear all items</a></small>

</div>

<footer>

<p></p>

</footer>

</div>

<script src="demo/jquery-1.7.1.js"></script>

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

<script src="demo/bootstrap.js"></script>

<script type='text/javascript'>

var filelist = document.getElementById("file-list");

function groupTemplate(groupID, files) {

var html = [];

for (var i = 0; i < files.length; i++) {

var file = files[i];

var id = "group_" + groupID + "_file_" + file.extra.fileID;

html.push(

"<li id='" + id + "' data-fileid='" + file.extra.fileID + "' data-groupid='"+ groupID +"'>" +

"<span class='filename'>" + file.name + "</span> " +

"<div><span class='not-done'><em>Loading...</em></span><span class='on-done'><span class='time-to-load'></span> ms</span></div>" +

"<span class='details'><a href='#' class='btn'>details</a></span> " +

"<div class='modal hide'>" + file.name + "<br />" + file.type + "<br /></div>" +

"<pre>" + JSON.stringify(file, null, '\t') + "</pre>" +

"</li>"

);

}

var start = "<li id='group_" + groupID + "' class='group'>Group: " + groupID + " (" + files.length + " files) </li>";

return start + html.join('');

}

var opts = {

on: {

load: function(e, file) {

var fileDiv = $("#group_" + file.extra.groupID + "_file_" + file.extra.fileID)

fileDiv.addClass("done");

var ms = file.extra.ended - file.extra.started;

fileDiv.find(".time-to-load").text(ms);

if (file.type.match(/image/)) {

// Create a thumbnail and add it to the output if it is an image

var img = new Image();

img.onload = function() {

fileDiv.find(".modal").append(img);

fileDiv.prepend($(img).clone());

};

img.src = e.target.result;

}

else {

//fileDiv.find(".modal").append($("<div />").text(e.target.result));

}

},

error: function(e, file) {

$("#group_" + file.extra.groupID + "_file_" + file.extra.fileID).addClass("error");

},

groupstart: function(group) {

$(filelist).append(groupTemplate(group.groupID, group.files));

$(filelist).find(".details a:not(.initialized)").click(function() {

$(this).closest("li").find(".modal").modal('show');

})

$(filelist).find(".modal:not(.initialized)").addClass("initialized").modal({ show: false }).on("show", function() {

});

},

groupend: function(group) {

$("#group_" + group.groupID).append(

"<div>(Time to load: " + (group.ended - group.started) + "ms)</div>"

);

}

}

};

FileReaderJS.setupInput(document.getElementById('file-input'), opts);

FileReaderJS.setupDrop(document.getElementById('dropzone'), opts);

FileReaderJS.setupDrop(document.getElementById('sidebar'), opts);

FileReaderJS.setupClipboard(document.body, opts);

$(function() {

$(".sidebar").on('click', 'input', function() {

FileReaderJS.setSync($("#sync").is(":checked"));

setTimeout(function() {

$("body").toggleClass("sync", !!FileReaderJS.getSync());

}, 100);

});

$("#clear-list").on("click", function() {

$("#file-list").empty();

return false;

});

$("body").toggleClass("disabled", !FileReaderJS.enabled);

});

</script>