idb.filesystem.js

idb.filesystem.js

idb.filesystem.js is a well tested JavaScript polyfill implementation of the HTML5 Filesystem API. It is intended for browsers that do not support the API natively.

The library works by using IndexedDB as its underlying storage layer. Essentially, this means that any browser supporting IndexedDB also supports the Filesystem API! All you need to do is make Filesystem API calls, and the rest is magic.

Supported Browsers

• Firefox 11+
• Safari 7.1+
• iOS 8+
• Opera 15+
• IE 10+

Unlisted browsers and/or versions (e.g. earlier versions of Firefox) that support IndexedDB will likely work; I just haven't tested them.

Demo

Two demo apps are included under /demos. The basic demo allows you add files to the app by drag and drop from the desktop. The second demo is a slightly modified version of filer.js's playground app. What's exciting is that the same app now works in other browsers besides Chrome!

Getting started

Install the polyfill:

npm install idb.filesystem.js --save

Drop it on your page:

<script src="node_modules/idb.filesystem.js/dist/idb.filesystem.min.js" async></script>

Then use the Filesystem API as normal! See my HTML5Rocks article on using the Filesystem API.

Basic example of opening a filesystem and writing to a new .txt file:

window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
  console.log('Opened ' + fs.name);
  
  fs.root.getFile('NewFile.txt', {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwritestart = function() {
        console.log('WRITE START');
      };
      
      fileWriter.onwriteend = function() {
        console.log('WRITE END');
      };

      var blob = new Blob(['1234567890'], {type: 'text/plain'});
    
      fileWriter.write(blob);
    }, onError);
  }, onError);
}, onError);

function onError(e) {
  console.log('Error', e);
}

Using with filer.js

filer.js is a convenience library for the HTML5 Filesystem API. It wraps API calls with familiar UNIX commands (cp, mv, ls) for its own API.

filer.js works well with idb.filesystem.js, with a few exceptions. Unimplemented methods in this library and filer.open() (because filesystem: URLs are not known by unsupported browsers). There may be other API calls in filer.js that do not work, but I haven't tested them.

Contributing

Building

Install the dependencies and compile the library by running gulp:

npm install
gulp

This will output a built file to dist/idb.filesystem.min.js.

Releasing

To cut a new release, run:

npm version patch
gulp
npm publish