Storing images and files in IndexedDB

Storing images and files in IndexedDB

// IndexedDB
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1;
/*
Note: The recommended way to do this is assigning it to window.indexedDB,
to avoid potential issues in the global scope when web browsers start
removing prefixes in their implementations.
You can assign it to a varible, like var indexedDB… but then you have
to make sure that the code is contained within a function.
*/
// Create/open database
var request = indexedDB.open(“elephantFiles”, dbVersion);
request.onsuccess = function (event) {
    console.log(“Success creating/accessing IndexedDB database”);
    db = request.result;
    db.onerror = function (event) {
        console.log(“Error creating/accessing IndexedDB database”);
    };
    // Interim solution for Google Chrome to create an objectStore. Will be deprecated
    if (db.setVersion) {
        if (db.version != dbVersion) {
            var setVersion = db.setVersion(dbVersion);
            setVersion.onsuccess = function () {
                createObjectStore(db);
                getImageFile();
            };
        }
        else {
            getImageFile();
        }
    }
    else {
        getImageFile();
    }
}
// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
    createObjectStore(event.target.result);
};

https://gist.github.com/1893386

console.log(“Creating objectStore”)
dataBase.createObjectStore(“elephants”);
// Create XHR
var xhr = new XMLHttpRequest(),
    blob;
xhr.open(“GET”, “elephant.png”, true);
// Set the responseType to blob
xhr.responseType = “blob”;
xhr.addEventListener(“load”, function () {
    if (xhr.status === 200) {
        console.log(“Image retrieved”);
        // File as response
        blob = xhr.response;
        // Put the received blob into IndexedDB
        putElephantInDb(blob);
    }
}, false);
// Send XHR
xhr.send();

 

 

 

 

 

 

This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Storing images and files in IndexedDB

  1. rg443 says:
    (function () {
        // IndexedDB
        var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
            IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
            dbVersion = 1.0;
    
        // Create/open database
        var request = indexedDB.open("elephantFiles", dbVersion),
            db,
            createObjectStore = function (dataBase) {
                // Create an objectStore
                console.log("Creating objectStore")
                dataBase.createObjectStore("elephants");
            },
    
            getImageFile = function () {
                // Create XHR
                var xhr = new XMLHttpRequest(),
                    blob;
    
                xhr.open("GET", "elephant.png", true);
                // Set the responseType to blob
                xhr.responseType = "blob";
    
                xhr.addEventListener("load", function () {
                    if (xhr.status === 200) {
                        console.log("Image retrieved");
                        
                        // Blob as response
                        blob = xhr.response;
                        console.log("Blob:" + blob);
    
                        // Put the received blob into IndexedDB
                        putElephantInDb(blob);
                    }
                }, false);
                // Send XHR
                xhr.send();
            },
    
            putElephantInDb = function (blob) {
                console.log("Putting elephants in IndexedDB");
    
                // Open a transaction to the database
                var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);
    
                // Put the blob into the dabase
                var put = transaction.objectStore("elephants").put(blob, "image");
    
                // Retrieve the file that was just stored
                transaction.objectStore("elephants").get("image").onsuccess = function (event) {
                    var imgFile = event.target.result;
                    console.log("Got elephant!" + imgFile);
    
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;
    
                    // Create and revoke ObjectURL
                    var imgURL = URL.createObjectURL(imgFile);
    
                    // Set img src to ObjectURL
                    var imgElephant = document.getElementById("elephant");
                    imgElephant.setAttribute("src", imgURL);
    
                    // Revoking ObjectURL
                    URL.revokeObjectURL(imgURL);
                };
            };
    
        request.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };
    
        request.onsuccess = function (event) {
            console.log("Success creating/accessing IndexedDB database");
            db = request.result;
    
            db.onerror = function (event) {
                console.log("Error creating/accessing IndexedDB database");
            };
            
            // Interim solution for Google Chrome to create an objectStore. Will be deprecated
            if (db.setVersion) {
                if (db.version != dbVersion) {
                    var setVersion = db.setVersion(dbVersion);
                    setVersion.onsuccess = function () {
                        createObjectStore(db);
                        getImageFile();
                    };
                }
                else {
                    getImageFile();
                }
            }
            else {
                getImageFile();
            }
        }
        
        // For future use. Currently only in latest Firefox versions
        request.onupgradeneeded = function (event) {
            createObjectStore(event.target.result);
        };
    })();
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s