WEBSQL BLOB SAMPLE

HTML

<script src="//rawgit.com/giabos/ez-bind/master/build/ez-bind.min.js"></script>
<BR>
<img ez-attr="src: imageSrc">
<input  id = "file" type="file" capture="camera" accept="image/*" ez-on="change: newPhoto"> 
    <button ez-on="click:clear">Clear</button>
    <button ez-on="click:load">Load</button>
    <button ez-on="click:deleteAll">Delete all</button>

CSS

img {
    width: 50px;
}

JavaScript

var db = openDatabase('mydb', '1.0', 'Test DB', 200 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS TBL (id integer primary key autoincrement, data blob)');
});


//var vm = new EZ(document.documentElement);

var vm = document.documentElementById('file').value

vm.newPhoto = function (event) {
  if(event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") === 0) {
    console.log(event.target.files[0].type);  
    vm.imageSrc = URL.createObjectURL(event.target.files[0]);
      var byteArray = new Uint8Array(event.target.files[0]);
      
    db.transaction(function (tx) {  
       tx.executeSql('insert into TBL (data) values (?)', [ event.target.files[0].slice() ]);
        console.log("inserted");
    });  
  
  }
};

vm.clear = function () {
  vm.imageSrc=undefined;  
};


vm.load = function () {
    db.transaction(function (tx) {  
        tx.executeSql('select data from TBL where id = 5', [  ], function (tx, result) {
            var rows = result.rows;
            
            if (rows.length === 1) {
                console.log(rows.item(0).data);
                vm._do(function () {
                    console.log(rows.item(0).data instanceof Blob);
                    //var blob = new Blob(rows.item(0).data, {type: 'image/jpg'});
                    vm.imageSrc = URL.createObjectURL( rows.item(0).data );   
                });
            }
        });
        
    });  
};

vm.deleteAll = function () {
     db.transaction(function (tx) {  
       tx.executeSql('delete from TBL');
        console.log("deleted");
    });  
};