Blobs

Author: Gábor Dolla May 22nd, 2013

JayData has been supporting blobs for some time but so far binary data was converted to base64 strings. From 1.3 we improved blob handling and now blob is a binary stream. The new internal converter subsystem allows easy conversion from many types to blob and vice versa, so you can convert from the following types to $data.Blob with a simple assignment:

String
Array
Number
Boolean
Blob
Uint8Array
Buffer
Object

$data.Blob has many functions so that you can do explicit conversion:

toString()
toBase64()
toArray()
toHexString()
toDataURL()

Let’s create a simple code which downloads images from the net and stores them in local storage:

$data.define(<span class="str">"Hero"</span>, {
    id: { type: <span class="str">"int"</span>, key: <span class="kwrd">true</span>, computed: <span class="kwrd">true</span> },
    image: $data.<span class="str">Blob
</span></code><code class="language-javascript">}).setStore(<span class="str">'default'</span>, {
    name: <span class="str">'local'</span>,
    tableName: <span class="str">'FlightHeroes'</span>,
    databaseName: <span class="str">'FlightDb'</span>
});

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

downloadImage(<span class="str">'http://upload.wikimedia.org/wikipedia/commons/6/62/Bob_Hoover_2005_Gathering_of_Eagles_Lithograph.jpg'</span>);
downloadImage(<span class="str">'http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/ChuckYeager.jpg/471px-ChuckYeager.jpg'</span>);

$data.define("Hero", {

id: { type: "int", key: true, computed: true },

image: $data.Blob

</code><code class="language-javascript">}).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();

};

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');

Now let’s retrieve the images from local store and put them onto the screen:

<span class="kwrd">function</span> showAll() {
    Hero.readAll()
    .then(<span class="kwrd">function</span>(heroes){
        heroes.forEach(<span class="kwrd">function</span>(hero) {
            $(<span class="str">'&lt;img&gt;'</span>)
                .attr(<span class="str">'src'</span>, $data.Blob.toDataURL(hero.image))
                .load(<span class="kwrd">function</span>() { $(<span class="str">'#images'</span>).append($(<span class="kwrd">this</span>)); });
        });
    });
}

function showAll() {

Hero.readAll()

.then(function(heroes){

heroes.forEach(function(hero) {

$('<img>')

.attr('src', $data.Blob.toDataURL(hero.image))

.load(function() { $('#images').append($(this)); });

});

}

JayData.org

Blobs