How can we clear the indexeddb with capacitorjs?

[rstor1]

Hi,

I am creating an Ionic(Angular) app and taking photos with the camera that will ultimately be done with a mobile. I am wondering how can I clear the indexedDB with capacitorjs? Should I use something else that is also compatible with mobile or can I do it with capacitor?

Basically, what I want to achieve is upon each new photo taken with camera, the indexedDB would clear before storing a new photo.

Thanks

[rstor1]

I found it, Storage.clear(). Still confused because on progressive web apps Storage falls back to localstorage and clear() does clear. What I do not yet understand is why IndexedDB still has entries and continues to record with every camera shot? Shouldn't this get cleared as well?

[dotNetkow]

Can you elaborate on how you're taking photos? Share some code, which Capacitor plugins you're using, etc.

[rstor1]

Hi @dotNetkow ,
I am using the ionic tutorial for the photo gallery to start:

 import { Injectable } from '@angular/core';
 import {
 Plugins, CameraResultType, Capacitor, FilesystemDirectory,
 CameraPhoto, CameraSource
} from '@capacitor/core';
import { BehaviorSubject, Observable } from 'rxjs';


const { Camera, Filesystem, Storage } = Plugins;

@Injectable({
providedIn: 'root'
})
export class PhotoService {
public photo: Photo;
private PHOTO_STORAGE: string = "photos";
private finalPhotoUri: any;`

`public async addNewToGallery() {
 // Take a photo
 const capturedPhoto = await Camera.getPhoto({
  resultType: CameraResultType.Uri,
  source: CameraSource.Camera,
  quality: 100
 });

this.photo = {
  filepath: "soon...",
  webviewPath: capturedPhoto.webPath
}


const savedImageFile = await this.savePicture(capturedPhoto);

 Storage.set({
  key: this.PHOTO_STORAGE,
  value: JSON.stringify(savedImageFile)
 });

this.setPhoto(this.photo);
 }`

 ` private async savePicture(cameraPhoto: CameraPhoto) {
   // Convert photo to base64 format, required by Filesystem API to save
   const base64Data = await this.readAsBase64(cameraPhoto);

 // Write the file to the data directory
 const fileName = new Date().getTime() + '.jpeg';
 const savedFile = await Filesystem.writeFile({
  path: fileName,
  data: base64Data,
  directory: FilesystemDirectory.Data
 });

 this.finalPhotoUri = await Filesystem.getUri({
  directory: FilesystemDirectory.Data,
  path: fileName
 });


 // Use webPath to display the new image instead of base64 since it's
 // already loaded into memory
 return {
  filepath: fileName,
  webviewPath: cameraPhoto.webPath
 };
}

private async readAsBase64(cameraPhoto: CameraPhoto) {
// Fetch the photo, read as a blob, then convert to base64 format
const response = await fetch(cameraPhoto.webPath!);
const blob = await response.blob();

return await this.convertBlobToBase64(blob) as string;
}

private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
  resolve(reader.result);
};
reader.readAsDataURL(blob);
});
}
.
.
.`

Then I try to delete from Storage with:

`  async clear() {
   await this.rmdir();
  }

  async rmdir() {
  try {
  let ret = await Filesystem.rmdir({
    path: this.finalPhotoUri,
    directory: FilesystemDirectory.Documents,
    recursive: false,
  });
  } catch (e) {
  console.error('Unable to remove directory', e);
  }
}`

I get this when trying to call clear() and there are 17 photos in FileStorage in IndexedDB:

[dotNetkow]

From the tutorial, we save the photos into the Data directory, not Documents:

const savedFile = await Filesystem.writeFile({
  path: fileName,
  data: base64Data,
  directory: FilesystemDirectory.Data
 });

So that would explain why they don't exist. Now, the error you posted says that the Folder doesn't exist. Could that be because you're running this on the web? Does it work on mobile?