Store Image File in IndexedDB

Question

I had problems trying to store and image the file in the local storage of IndexedDB, I grabbed the file object and tried to click it in IndexedDB, but it seems to throw and throw an error: DOM Exception: DATA_CLONE_ERR (25)

How can I convert a file object that looks like this (below) to what I can store in indexedDB and retrieve from indexedDB later?

attribute: 32 contentType: "image/png" displayName: "image1" displayType: "PNG File" fileType: ".png" name: "image1.png" path: "C:\pictures\image1.png" 

Answer 1

I suppose there might be something with your object that makes it look like an object literal that will be created using the key / value pair mentioned above. I suggest a console.log ging object after it has gone through JSON.stringify to make sure it matches one by one with your intentions.

IndexedDB copies objects to the object store using the HTML5 structured cloning algorithm . According to the specification , Error and Function objects cannot be cloned and cast DATA_CLONE_ERR , so look at this as a possible explanation.

Answer 2

IndexedDB supports saving blobs in Firefox and Chrome. There is an example for storing images in IndexedDB. The code works great with the latest version of Chrome and Firefox. Hope this helps.

Answer 3

Also note that Chrome (at least prior to version 23) does not yet support saving blob in IndexedDB and it will throw the error you specified if you try to save them directly. In the meantime, you will have to use the FileSystem API.

Answer 4

This article for Mozilla hackers should help - http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

Answer 5

You can use the ydn-db API.

See “Saving Blob Files and Data” at the link below.

http://dev.yathit.com/ydn-db/transaction.html

Greetings.