I'm having issues trying to store an image file in IndexedDB, I grab the file object and try and push that into IndexedDB but it seems to throw an error:

DOM Exception: DATA_CLONE_ERR (25)

How can I convert the file object, which looks like this (below) to something I can store in indexedDB and retrieve from indexedDB at a later date?

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

I'm having issues trying to store an image file in IndexedDB, I grab the file object and try and push that into IndexedDB but it seems to throw an error:

DOM Exception: DATA_CLONE_ERR (25)

How can I convert the file object, which looks like this (below) to something I can store in indexedDB and retrieve from indexedDB at a later date?

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

• javascript
• html
• indexeddb

• Can you take a look at this excellent article: hacks.mozilla/2012/02/storing-images-and-files-in-indexeddb and see if there are similarities with what you're trying to achieve. – Vincent Briglia Commented May 14, 2012 at 15:15
• It is an excellent article, but the image is stored locally rather than remotely - so I don't get a blob from the user. Or I do get a blob but its inside the file object - need to extract it out from there to use later. – CLiown Commented May 14, 2012 at 15:16

5 Answers 5

IndexedDB supports storing blobs in Firefox and Chrome. There is available example on storing images to IndexedDB. The code works fine with the newest version of Chrome and Firefox. Hope it helps.

I believe there might be something going on with your object that makes it look different than the object literal that would be created by the key/value pair you list above. I suggest console.logging the object after it passed through JSON.stringify to make sure it matches one to one with your intentions.

IndexedDB copies objects into the object store using the HTML5 structured clone algorithm. According to the spec, Error and Function objects cannot be cloned and throw a DATA_CLONE_ERR, so look to that as a possible explanation.

Also note that Chrome (at least through version 23) does not yet support storing blobs in IndexedDB, and will throw the error you described if you're trying store them directly. In the meantime you'll have to use the FileSystem API.

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

You could use ydn-db API.

See section "Storing File and Blob data" of the link below.

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

Cheers.