JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://include.jaydata.org/1.3.1pre/jaydata.js"></script>
<div id="images"></div>

JavaScript

$data.define("Hero", {
    id: { type: "int", key: true, computed: true },
    image: $data.Blob
}).setStore('default', {
    name: 'local',
    tableName: 'FlightHeroes',
    databaseName: 'FlightDb'
});

function downloadImage(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "arraybuffer";
    xhr.addEventListener("load", function () {
        if (xhr.status === 200) {
            var hero = new Hero();
            hero.image = xhr.response;
            hero.save();
        }
    }, false);
    xhr.send();
};

function showAll() {
    Hero.readAll()
    .then(function(heroes){
        heroes.forEach(function(hero) {
            $('<img>')
                .attr('src', $data.Blob.toDataURL(hero.image))
                .load(function() { $('#images').append($(this)); });
        });
    });
}

//downloadImage('http://upload.wikimedia.org/wikipedia/commons/6/62/Bob_Hoover_2005_Gathering_of_Eagles_Lithograph.jpg');
//downloadImage('http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/ChuckYeager.jpg/471px-ChuckYeager.jpg');
showAll();