filereader.js – A Lightweight FileReader Wrapper

I am working on project that needs to read local files. This relies on the FileReader interface, and I couldn’t find any JavaScript libraries to help out with common usage for this, so I made one.

View the project page and demo for the FileReader.js JavaScript FileReader Plugin!

FileReader is a JavaScript interface that allows you to read local files as binary. This is available in supported browsers when a user drags and drops files into a browser window or selects files from an input with a type of file. See the FileReader specification for more information.

filereader.js is a wrapper for accessing this functionality. It can be called using:

FileReaderJS.setupInput(fileInput, opts);
FileReaderJS.setupDrop(dropbox, opts);

If you use jQuery, you can access these calls with:

$("#fileInput").fileReaderJS(opts);
$("#dropbox").fileReaderJS(opts);

To see the full range of options and functionality, view the readme.

filereader.js is available under the MIT License. See the full filereader.js code or the single file raw javascript source on github.

You can see an example project using filereader.js on Instant Sprite, a browser based CSS Sprite Generator that I am working on. Try dragging images onto the body, or clicking to add multiple image files to see what is possible.

Tags: , , ,

5 Responses to “filereader.js – A Lightweight FileReader Wrapper”

  1. FileReader.js - Open Source Projects Says:

    […] FileReader.js is intended to make accessing files via the FileReader interface easier. Read more about the motivation behind filereader.js. […]

  2. Beben Koben Says:

    it’s one good master ;)
    http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

  3. FileReader.js Overview - FileReader.js Tutorial Says:

    […] FileReader.js is intended to make accessing files via the FileReader interface easier. Read more about the motivation behind filereader.js. […]

  4. FileReader.js | prosoxi.com Says:

    […] FileReader.js is intended to make accessing files via the FileReader interface easier. Read more about the motivation behind filereader.js. […]

  5. shad Says:

    how can I use the $_files[] on the file-drop-zone.instead of using file_puts contents(),for file validation purpose server side.I do not want to show the input element.
    eg this examplehere:http://tutorialzine.com/2011/09/html5-file-upload-jquery-php . used paramname:pic, like so
    how can I do this in filereader.js

Leave a Reply

Posting Code: Use html such as <pre lang='javascript'></pre>. See all supported languages.

CAPTCHA Image
*