Git Product home page Git Product logo

idb.filesystem.js's Introduction

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!

Demo app screenshot

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

Analytics

idb.filesystem.js's People

Contributors

ebidel avatar mudcube avatar piranna avatar sebmaster avatar gwynjudd avatar ussuri avatar aptwebapps avatar eeems avatar

Watchers

Gil avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.