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.