Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't save blob to indexedDB

I'm having trouble saving blob in IndexedDB, and only with blob.
If I save something else (like image as base64), everything works fine.
But with blob, there is simply empty object property saved.

Screenshot from console:

enter image description here

Code:

//prepared blob...
var openRequest = indexedDB.open("testDB",1);

openRequest.onupgradeneeded = function(e) {
    var thisDB = e.target.result;

    if(!thisDB.objectStoreNames.contains("stash")) {
        thisDB.createObjectStore("stash");
    }
}

openRequest.onsuccess = function(e) {
    db = e.target.result;

    var transaction = db.transaction(["stash"],"readwrite");
    var store = transaction.objectStore("stash");
    var tID = Date.now();

    var obj = {
        bl:blob,
        created:tID
    }
    console.log(obj);
    //add it 
    var request = store.add(obj, tID);
    request.onerror = function(e) {
        console.log("Error",e.target.error.name);
    }
    request.onsuccess = function(e) {
        console.log("success");
    }
}
openRequest.onerror = function(e) {
    //....
}

I also tried to save only blob (not wrapped as obj property), it's the same.
I can save blob to HDD, and if I console log my obj, I get:

enter image description here

So I guess, blob is valid, and problem is in adding it to indexedDB. I'm new to blob/indexedDB, and probably doing some noob mistake.

Can someone please advise, what am I doing wrong?

PS: no error messages at all

like image 949
Wolf War Avatar asked May 30 '15 14:05

Wolf War


1 Answers

Very old question, but there is support now for saving Blobs in IndexedDb:

  • https://developers.google.com/web/updates/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev
// Create an example Blob object
var blob = new Blob(['blob object'], {type: 'text/plain'});

try {
    var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

    // Store the object  
    var req = store.put(blob, 'blob');
    req.onerror = function(e) {
        console.log(e);
    };
    req.onsuccess = function(event) {
        console.log('Successfully stored a blob as Blob.');
    };
} catch (e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // After exception, you have to start over from getting transaction.
        var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

        // Obtain DataURL string
        var data = event.target.result;
        var req = store.put(data, 'blob');
        req.onerror = function(e) {
            console.log(e);
        };
        req.onsuccess = function(event) {
            console.log('Successfully stored a blob as String.');
        };
    };
    // Convert Blob into DataURL string
    reader.readAsDataURL(blob);
}

As of posting this, the referenced Document was last updated on: Last updated 2019-03-20 UTC.

like image 167
anAgent Avatar answered Sep 19 '22 10:09

anAgent