Not able to convert the base64 to image path in Ionic 4

Question

I am working on my Ionic 4 app and I have used the camera plugin for image uploading and I have converted the image to the base64 for showing the image but the problem is that I am not able to convert the base64 to proper image path for sending it to the API.

This is my editimage.page.html:

<ion-item class="newitem2">
    <ion-avatar class="image-center">
        <img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
        <ion-icon (click)="presentActionSheet()" class="myicon11" name="create"></ion-icon>
    </ion-avatar> 
</ion-item>

This is my editprofile.page.ts:

  async UpdateUserDetails(){
    this.storage.get('USER').then(userde => {
      if (userde) {
        this.userdetails = userde;
        const userdetailseditss = {
          first_name: this.userdetailsedit.value.first_name,
          last_name: this.userdetailsedit.value.last_name,
          mobile: this.userdetailsedit.value.mobile,
          profile_pic: this.userdetailsedit.value.profile_pic,
        };
        this.chakapi.UserProfileUpdate(userdetailseditss, 'userUpdateProfile/' + this.userdetails.id).subscribe((data) => {
          console.log(data);
        }, error => { 
          console.log(error); });
      }
    });
  }

  async imageuserchoose(sourceType){
    const options: CameraOptions = {
      quality: 76,
      sourceType: sourceType,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
    }

    this.camera.getPicture(options).then((imageData) => {
    if (sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
      let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
      let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
      let index = filename.indexOf('?');
      if (index > -1) {
        filename = filename.substring(0,index);
      }
      this.file.readAsDataURL(path, filename).then(data => {
          this.imagepic = data;
          this.userdetailsedit.patchValue({
            profile_pic: data,
          });
      });
  }
  if (sourceType === this.camera.PictureSourceType.CAMERA) {

      let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
      let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
      this.file.readAsDataURL(path, filename).then(data => {
          this.imagepic = data;
          this.userdetailsedit.patchValue({
            profile_pic: data,
          }); 
      });
  }
    }, (err) => {
    });
  }

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Select Image Source',
      backdropDismiss:true,
      buttons: [{
        text: 'Choose From Gallery',
        icon: 'images',
        cssClass: 'myActionSheetBtnStyle',
        handler: () => {
          this.imageuserchoose(this.camera.PictureSourceType.PHOTOLIBRARY);
        }
      },
      {
        text: 'Use Camera',
        icon: 'camera',
        cssClass: 'myActionSheetBtnStyle',
        handler: () => {
          this.imageuserchoose(this.camera.PictureSourceType.CAMERA);
        }
      }]
    });
    await actionSheet.present();
  }
}

The problem is that when I am sending the image to the API, it is base64 and I am not able to convert it before sending.

Any help is much appreciated.

Answer 1

Please try this. You can use file transfer Native Plugin for this. It will solve your problem.

In the ts file:

async UpdateUserDetails(){ 
   if(this.imagepic && this.fileUploadName) {
    let  fileTransfer = this.transfer.create();
    let options: FileUploadOptions = {
      fileKey: 'profile_pic',
      fileName: this.fileUploadName,
      headers: {}     
  }  
  options.params = {
    first_name: this.userdetailsedit.value.first_name,
    last_name: this.userdetailsedit.value.last_name,
    mobile: this.userdetailsedit.value.mobile,
    old_password:  this.userdetailsedit.value.old_password,
    password: this.userdetailsedit.value.password,    
  };
  this.storage.get('USER').then(userde => {
    if (userde) {
    this.userdetails = userde;
   fileTransfer.upload(this.imagepic, this.apiUrl+'userUpdateProfile/'+this.userdetails.id, options)
   .then((data) => {
     if(data && data.responseCode==200){
      let response=JSON.parse(data.response);
      if(response.status === "success"){
      this.storage.set('ID', response.data.id);
      this.storage.set('USER', response.data);
      this.modalController.dismiss();
      } else{
        loading2.dismiss();
      }
     }else{
       //show error msg  
     }
   }, (err) => {     
    console.log('upload err ::',err);
   });
  }
 });
}
}
async imageuserchoose(sourceType){
    const options: CameraOptions = {
      quality: 76,
      sourceType: sourceType,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      // allowEdit: true,
    }

    this.camera.getPicture(options).then((imageData) => {    
      let filename,path;
      this.imagepic = imageData;
        if (sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
             path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
             filename = imageData.substring(imageData.lastIndexOf('/') + 1);
            let index = filename.indexOf('?');     
            if (index > -1) {
              filename = filename.substring(0,index);
            }      
        }
        if (sourceType === this.camera.PictureSourceType.CAMERA) {
             filename = imageData.substring(imageData.lastIndexOf('/') + 1);
             path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
            console.log(path,'FileName::', filename);            
        }
        this.fileUploadName=filename;
        this.file.readAsDataURL(path, filename).then(data => {          
          this.userdetailsedit.patchValue({
            profile_pic: data,
          }); 
      });
    }, (err) => {
     // Handle error
    });
  }

This will solve your problem.