Store an image file in IndexedDB

html, indexeddb, javascript

Solution

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.log`ging 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.

Problem

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" ```

Original source