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
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
<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!
Resources
I found a lot of information while implementing this plugin. Here are some resources that helped: