Unable to store Blob types in IndexedDB on Safari

I'm having issues with storing blobs in IndexedDB on Safari version 10.1.2 (also facing the same issue on IOS).

I'm using the angular2-indexeddb module wrapper, however - i don't think it's a problem with the module as such. My code works fine in Chrome, however when attempting to put a blob object in the Safari indexedDb, the record always displays as 'null' (see FileData field):

I have tried a variety of different blob files (audio, video, html) and they always display as 'null'. No (visible) errors are returned from the IndexedDb when inserting this record.

From what i've read - blobs should be supported in Safari. I'm thinking the problem could be associated with the way the blob is created? i.e. perhaps Safari does not like the blob data?

Below is a sample of my code (i haven't included too much here, so please let me know if more information is required):

      // create blob:
      const aFileParts = ['<a id="a"><b id="b">foo!</b></a>'];
      const oMyBlob = new Blob(aFileParts, {type : 'text/html'});

      console.log('blob type' + oMyBlob.type); // outputs as 'text/html'

      // initialize my indexeddb store:
      return this.initializeStores().then(() => {

        // add 'oMyBlob' to the FileData data store:
        return this.db.add('FileData',
          { FileName: 'foo', FileData: oMyBlob, FileType: 'audio' }).then(() => {

            // Success
            console.log('added ' + 'foo' + ' to FileData store.');

            // Get the file from the FileData store
            return this.db.getByIndex('FileData', 'FileName', 'foo').then((record) => {
              return Promise.resolve();
            });

          }, (error) => {
            console.log(error);
            this.handleError(error)
            return Promise.reject(error);
          });
      }, (error) => {
        this.handleError(error);
        return Promise.reject(error);
      });

as a side note - i can store this data as an ArrayBuffer in Safari IndexedDB without any issues. The problem is that i then have to convert this back to a blob when i retrieve it from the db (the extra processing power required is not ideal).

Any help is much appreciated.

So i managed to find the cause of the issue. When creating my store i was referencing an incorrect index (mainly because i was following an online tutorial)

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'id', autoIncrement: true });

The keypath 'id' does not exist within my store. This was causing the issues when saving the blobs (strangely with no reported error...and it didn't appear to cause issues on chrome).

The correct code:

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'FileName', autoIncrement: true });

'FileName' is the name of a property within my store object. This now fixes the issue on desktop safari. So the lesson here is to make sure the KeyPath is correct.

However, i now face a new issue. On IOS Safari the blob fails to persist to the indexedDb. I get the following error:

error: DOMError {name: "UnknownError", message: "An unknown error occurred within Indexed Database."}

So it appears that blobs are not supported for indexedDb on IOS Safari (i'm assuming this is a bug). For now i will just store ArrayBuffers instead of blobs.