Storing Pictures from Camera in Ionic Storage

Ionic Native
1

Hey!
Sadly this solution doesn’t work for me :frowning:

  pickImage(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      sourceType,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      saveToPhotoAlbum: true
    };
    this.camera.getPicture(options).then((imagePath) => {
      imagePath = 'file://' + imagePath;
      console.log('image path', imagePath);
      this.filePath.resolveNativePath(imagePath)
        .then(res => {
          const correctPath = res.substr(0, res.lastIndexOf('/') + 1);
          const currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.length).toString();
          this.copyFileToLocalDir(correctPath, currentName, 'bg.jpg');
        }).catch(err => {
          console.log('unable to resolve file path issue', err);
        });
    }, (err) => {
    });
  }

does anybody have an idea or solution for this? in ionic 4? :slight_smile:

2

You add in the AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />

Read more here > https://developer.android.com/guide/topics/manifest/permission-element

:slight_smile:

1 Like
3

Hi! thanks for your response. I added this line to the AndroidManifest.xml, but it doesn’t work either :frowning:
I get the same Error:

Not allowed to load local resource: file:///....
4

Update:
pickImage() doesn’t seem to be the problem here, its in copyLocalFiletoDir()

 copyFileToLocalDir() {
    const d = new Date();
    const n = d.getTime();
    const newFileName =  n + '.jpg';
    const externalStoragePath: string = this.file.dataDirectory;

    this.file.resolveLocalFilesystemUrl(this.correctPath + this.currentName).then((entry: any) => {
      console.log('entry: ', entry);
      this.file.resolveLocalFilesystemUrl(externalStoragePath).then((dirEntry: any) => {
        entry.copyTo(dirEntry, newFileName);
      }).catch((error) => {
        console.log('dirEntryerror: ' + error);
      });
    }).catch((error) => {
      console.log('entryerror: ' + error);
    });

    // this.storage.set('bgImgPath', this.file.getDirectory);

  }

FileError: {“code”:1,“message”:“NOT_FOUND_ERR”}

5

so, after researching and finding this tutorial:
The Ionic 4 Images Guide (Capture, Store & Upload with POST)

My Code looks like this and finally works:

pickImage()

  pickImage(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      sourceType,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      saveToPhotoAlbum: true
    };
    this.camera.getPicture(options).then((imageData) => {
      this.currentImage = 'data:image/jpeg;base64,' + imageData;
      const path = this.webView.convertFileSrc(this.currentImage);
      this.storage.set('bgImgPath', path);
    }, (err) => {
      // Handle error
      console.log('Camera issue: ' + err);
    });
  }

and copyFileToLocalDir()

  copyFileToLocalDir() {
    const d = new Date();
    const n = d.getTime();
    const newFileName =  n + '.jpg';
    const externalStoragePath: string = this.file.dataDirectory;

    this.file.resolveLocalFilesystemUrl(this.correctPath + this.currentName).then((entry: any) => {
      console.log('entry: ', entry);
      this.file.resolveLocalFilesystemUrl(externalStoragePath).then((dirEntry: any) => {
        entry.copy(dirEntry, newFileName);
      }).catch((error) => {
        console.log('dirEntryerror: ' + error);
      });
    });
  }