JayData - Update many rows with images

by kougiland

HTML

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

<h1>Image Blobs Pre-Save</h1>
<img id="img1-from-Web" />
<img id="img2-from-Web" />

<h1>Image Blobs From IndexedDB</h1>
<img id="img1-from-IndexedDb" />
<img id="img2-from-IndexedDb" />

JavaScript

$data.define("Person", {
    Id: { type: "int", key: true },
    Name: { type: String },
    ProfileImageUrl: { type: String },
    ProfileImage: { type: "blob" }
}).setStore('default', { name: 'local', tableName: 'Person', collectionName: 'Person'});

function DeletePeople() {
    Log('People: DELETE');
    return Person.removeAll();
};

function DownloadPeople() {
        Log('People: GET');
        //this is actually an ajax function
        return Person.addMany([
            { Id: 1, Name: 'Person 1', ProfileImageUrl: 'http://jaydata.org/examples/Images/logo_jaydata_light.png' },
            { Id: 2, Name: 'Person 2', ProfileImageUrl: 'http://jaydata.org/examples/Images/logo_jaydata_light.png' }
        ]);
};

function DownloadPersonPhoto(person) {
        var deferred = $.Deferred();
        var url = person.ProfileImageUrl;
        var xhr = new XMLHttpRequest();
        var reader = new FileReader();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.addEventListener("load", function () {
            if (xhr.status === 200) {                
                reader.addEventListener('load', function(e) {
                    person.ProfileImage = e.target.result;
                    person.save().then(deferred.resolve);
			    });
			    var responseWithMimeType = new Blob(
				   new Array(xhr.response),
				   { 'type' : xhr.getResponseHeader('Content-Type') }
			    );
			    reader.readAsDataURL(responseWithMimeType);
                LoadImageFromBlob(xhr.response, "img" + person.Id + "-from-Web");
            }
			else {
				Log('Person Photos: Not Found: ' + url);
				deferred.rejectWith('not found');
			}
        }, false);
        xhr.send();
        return deferred.promise();
};

function DownloadPeoplePhoto() {
    var promises = [];
    return Person.readAll()
    .then(function(people) {
        people.forEach(function(person) {
            promises.push(DownloadPersonPhoto(person));
        });
        return...