example.html

<!DOCTYPE html>
<!--
Copyright 2012, Nexedi SA

This program is free software: you can Use, Study, Modify and Redistribute
it under the terms of the GNU General Public License version 3, or (at your
option) any later version, as published by the Free Software Foundation.

You can also Link and Combine this program with other software covered by
the terms of any of the Free Software licenses or any of the Open Source
Initiative approved licenses and Convey the resulting work. Corresponding
source of such a combination shall include the source code for all other
software used.

This program is distributed WITHOUT ANY WARRANTY; without even the implied
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

See COPYING file for full licensing terms.
See https://www.nexedi.com/licensing for rationale and options.
-->
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jIO Example</title>
</head>
<body>
  <script type="text/javascript">
    <!--
var log = function (o) {
  var node = document.createElement ('div');
  node.textContent = o;
  document.getElementById('log').appendChild(node);
};
        //-->
  </script>
  <div id="log">
  </div>
  <script src="../src/sha256.amd.js"></script>
  <script src="../lib/rsvp/rsvp-custom.js"></script>
  <script src="../jio.js"></script>
  <script src="../src/jio.storage/localstorage.js"></script>
  <script type="text/javascript">
    <!--
var jio_instance = null;

log('Welcome to the jIO example.html!')
log('-> Create jIO instance');

jio_instance = jIO.createJIO({
  "type": 'local',
  "username": 'jIOtest',
  "applicationname": 'example'
});

// Careful! These are asynchronous methods!
// And they use promises with a custom version of RSVP.js
// For more information, see
// RSVP         https://github.com/tildeio/rsvp.js#rsvpjs--
// Promises A+  http://promisesaplus.com/
// CommonJS     http://wiki.commonjs.org/wiki/Promises
log('-> post "video" document metadata to localStorage');

jio_instance.post({
  "_id": 'video',
  "title": 'My Video Title',
  "codec": 'vorbis',
  "language": 'en',
  "description": 'Image compilation'
}).then(function () {

  log('-> put "thumbnail" attachment to localStorage');

  return jio_instance.putAttachment({
    "_id": "video",
    "_attachment": "thumb.jpg",
    "_data": "This is the thumbnail content",
    "_mimetype": 'image/jpeg'
  });

}).then(function () {

  log('-> put "video" attachment to localStorage');

  return jio_instance.putAttachment({
    "_id":"video",
    "_attachment": "myvideo.ogg",
    "_data": new Blob(["This is the video content"], {"type": "video/ogg"})
  });

}).then(function (response) {

  log('Done! Refresh the page to see get and remove command.');

}, function (err) {

  log('Error! ' + err.statusText + ": " + err.reason + ", " + err.message);
  log('-> get "video" document metadata from localStorage');

  jio_instance.get({
    "_id": "video"
  }).then(function (response) {

    log('Title is: "' + response.data.title + '"');
    log('-> get "video" attachment content');

    return jio_instance.getAttachment({
      "_id": "video",
      "_attachment": "myvideo.ogg"
    });

  }).then(function (response) {

    return jIO.util.readBlobAsBinaryString(response.data);

  }).then(function (event) {

    log('Video content is: ' + event.target.result);
    log('-> remove "video" document from localStorage');

    return jio_instance.remove({"_id":'video'});

  }).then(function (response) {

    log('Done! Refresh the page to see post and putAttachment command.');

  }, function (err) {

    log('Error! ' + err.statusText + ": " + err.reason + ", " + err.message);

  });

});

        //-->
  </script>
</body>
</html>