0

Currently I am developing Ionic3 project. Now I tried to store image data from UI to sqlite. But I am not sure about the appropriate way to do it. If you have already done, Please help me How can I to do it?

3
  • refer this ionicframework.com/docs/native/base64 Commented Nov 16, 2017 at 9:41
  • Thank you for your help. But I couldn't do it. Please explain about your experience Commented Nov 16, 2017 at 19:06
  • can you please tell me that actually how do you get the image? Commented Nov 17, 2017 at 5:22

1 Answer 1

1

First of all you need to learn how to take a picture, and for that you should refer this link. https://devdactic.com/ionic-2-images/

after that the image is come in the path of image is like this file:///image_path, So you have to pass this path to the base64 plugin like this.

for that you have to install the plugin.

$ ionic cordova plugin add com-badrit-base64 $ npm install --save @ionic-native/base64

    public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
    title: 'Select Image Source',
    buttons: [
    {
      text: 'Load from Library',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
    }
    },
    {
      text: 'Use Camera',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.CAMERA);
      }
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
    ] 
    });
    actionSheet.present();
}

public takePicture(sourceType) {

    let resUser: string = "res.users";

    // Create options for the Camera Dialog
    var options = {
        quality: 100,
        sourceType: sourceType,
        saveToPhotoAlbum: true,
        correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library

    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {

    this.base64.encodeFile(imagePath).then((base64String: string) => {
      // console.log("-----base64String-----" + base64String);
      let imageSrc = base64String.split(",");
      console.log("---Splitted image string----" + imageSrc[1]);
      this.src = imageSrc[1]


      let args = {
        image: imageSrc[1]
      }

      this.odooRpc.updateRecord(resUser, this.data[0].id, args).then((res: any) => {
        console.log("----res of updation---" + res);
      }).catch((err: any) => {
        this.presentToast("There is some problem in uploading image")
      })

    })

    this.filePath.resolveNativePath(imagePath)
      .then(filePath => {
        let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
        let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      });

    } else {

    this.base64.encodeFile(imagePath).then((base64String: string) => {
      // console.log("-----base64String-----" + base64String);
      let imageSrc = base64String.split(",");
      console.log("---Splitted image string----" + imageSrc[1]);
      this.src = imageSrc[1]

      let args = {
        image: imageSrc[1]
      }

      this.odooRpc.updateRecord(resUser, this.data[0].id, args).then((res: any) => {
        console.log("----res of updation---" + res);
      }).catch((err: any) => {
        this.presentToast("There is some problem in uploading image")
      })
    })

    console.log("-------inside else IMage Path------" + imagePath);

    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
    }

private createFileName() {
    var d = new Date(),
    n = d.getTime(),
    newFileName = n + ".jpg";
    return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
    }, error => {
    this.presentToast('Error while storing file.');
    });
}
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for your help. I tried. but could you let me know about the imagePath? Which param is need in this variable? Please help more
if you have refer the link that i provided to you, then refer the updated answer
Thank you. I tried to do it in your way, but I couldn't get good result. As I am beginner, Could you please explain from start to end carefully? I need your full help, Please help me.
Thank you for your help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.