I am currently working on an Angular application where I am encountering an issue with creating an indexed database. The database is not being created as expected.
Below is a snippet of the code responsible for inserting entries into the database:
createImageFromBlob(ficname:any , image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", (evt) => {
let res = evt.target.result;
// Store data URL in localStorage
try {
if (typeof res === "string") {
localStorage.setItem(ficname, res);
this.dixieDbService.addNewImage(ficname, res).then(r => console.log("inserted successfully"));
}
}
catch (e) {
console.log("Storage failed: " + e);
}
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
Here is part of the bd.ts file:
import Table = Dexie.Table;
import Dexie from "dexie";
export interface ImageList {
id?: number;
imgName: string;
imgDataUrlValue: string|ArrayBuffer;
}
export class AppDB extends Dexie {
imageList!: Table<ImageList, number>;
constructor() {
super('ngdexieliveQuery');
this.version(3).stores({
imageList: '++id'
});
// this.on('populate', () => this.populate());
}
}
export const db = new AppDB();
And here is the service class:
import {Injectable} from "@angular/core";
import {liveQuery} from "dexie";
import {db, ImageList} from "../dixie/db";
@Injectable()
export class DixieIndexedDbService {
imageList$ = liveQuery(() => db.imageList.toArray());
listName = 'My local image list';
async addNewImage(imgName:string, imgDataVal:any) {
await db.imageList.add({
imgName: imgName,
imgDataUrlValue:imgDataVal
});
}
async getImgDataValue(imgName:string) {
return db.imageList.get({imgName: imgName});
}
}
You can check out the sample working code on StackBlitz here: