Brtdku

I am implementing a picture upload functionality to my app which I am developing with Ionic 4. I'm using the native plugin camera and a few others to do the following:

async selectImage() {

    const actionSheet = await this.actionsheet.create({

      header: "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'

      }

      ]

    });

    await actionSheet.present();

  }



  takePicture(sourceType: PictureSourceType) {

    var options: CameraOptions = {

      quality: 100,

      sourceType: sourceType,

      saveToPhotoAlbum: false,

      correctOrientation: true

    };



    this.camera.getPicture(options).then(imagePath => {

      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);

      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);

      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());

    });

  }



  copyFileToLocalDir(namePath, currentName, newFileName) {

    this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {

      this.presentToast('Dispongo a actualizar.');

      this.updateStoredImages(newFileName);

    }, error => {

     // this.presentToast('Error while storing file.');

    });

  }

  updateStoredImages(name) {

    this.storage.get(STORAGE_KEY).then(images => {

      let arr = JSON.parse(images);

      if (!arr) {

        let newImages = [name];

        this.storage.set(STORAGE_KEY, JSON.stringify(newImages));

      } else {

        arr.push(name);

        this.storage.set(STORAGE_KEY, JSON.stringify(arr));

      }



      let filePath = this.file.dataDirectory + name;

      let resPath = this.pathForImage(filePath);



      let newEntry = {

        name: name,

        path: resPath,

        filePath: filePath

      };



      this.images = [newEntry, ...this.images];

      this.ref.detectChanges(); // trigger change detection cycle

    });

  }

So, in the action sheet, when I press the first option (Load from Library) it opens the library and I can choose the picture without any problem. When I press ok, it throws an error: the error expected from the copyFileToLocalDir. However, if I do the same with the second option (Use Camera) and I take a photo with the camera, it loads it fine and I can store it later.

I can't find the problem, please help.

im using this code using ionic 3 and it's working fine .
and after i chose one image it will be uploading to firebase and on the same time view it at page.html

app.module.ts
you have to import

import { Camera } from "@ionic-native/camera";

import { File } from "@ionic-native/file";

and added them @providers
then use this code at page.ts which you will chose one image :

html view

<button ion-button full (click)="openGallery()">open gallery</button>

<img [src]="camel_profile_image_path" />

ts page

import { Camera, CameraOptions } from "@ionic-native/camera";

private camera: Camera,



async openGallery() {

try {

  const opstions: CameraOptions = {

    quality: 100,

    targetHeight: 600,

    targetWidth: 600,

    destinationType: this.camera.DestinationType.DATA_URL,

    encodingType: this.camera.EncodingType.JPEG,

    mediaType: this.camera.MediaType.PICTURE,

    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,

    correctOrientation: true

  }



  const result = await this.camera.getPicture(opstions);

  const image = 'data:image/jpeg;base64,' + result;

  const pictures = storage().ref('Profile Images/' + this.randomNumber + '.jpg');

  pictures.putString(image, 'data_url');

  this.base64Image = image;

  this.camel_profile_image_path = this.randomNumber; // view the image on html page 

  this.slidetothis();

} catch (error) {

  console.error(error);

}

}