IONIC 3 IOS can't read data from file

Question

I am using this file picker to upload files to my server:

https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin

My server takes base64 files, so I need to convert the file I uploaded. I am doing that using the file plugin mentioned in the ionic docs. So my code looks like this:

uploadIOS(){
    var self=this

    let utis = ["public.data"]

    FilePicker.pickFile(
        function (uri) {
            let correctPath = uri.substr(0, uri.lastIndexOf('/') + 1);
            let currentName = uri.substring(uri.lastIndexOf('/') + 1);

            self.file.readAsDataURL(correctPath, currentName).then(result=>{
                    console.log ('reading data ' + JSON.stringify(result))
                }).catch((err)=>{
                    console.log ('err4' + JSON.stringify(err))
                })
        },
        function (error) {
            console.log(JSON.stringify(error));
        },
        function (utis) {
            console.log('UTIS', this.utis)
        }
    )
}

but when I upload from Google Drive, or iCloud Drive or DropBox it returns

{"code":5,"message":"ENCODING_ERR"}

Answer 1

let self = this;
self.filePicker.pickFile().then(uri => {

let correctPath = uri.substr(0, uri.lastIndexOf('/') + 1);
let currentName = uri.substring(uri.lastIndexOf('/') + 1);
self.file.readAsDataURL("file:///" + correctPath, currentName).then(result=>{                           


})

I have fixed this issue using this code.

Answer 2

I don't know much about the FilePicker you are using but why don't try with the Ionic native component to use the camera? Just give it a try to https://ionicframework.com/docs/native/camera/ it's really easy to use (there is an example in the link) I normally use it like this:

  public selectFromGallery() {
    var options: CameraOptions = {
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      targetWidth: 640,
      targetHeight: 480,
      correctOrientation: true,
      quality: 100
    };
    this.camera.getPicture(options).then((imageData) => {
      return this.makeFileIntoBlob(imageData);
    }).then((imageBlob) => {
      this.cameraData = imageBlob;
      this.imageUpload(this.createFileName());
    }, (err) => {
      this.db.logMessage(new LogEntity("Error while selecting image", this.user.uid, JSON.stringify(err)), LogType.Error);
      this.presentToast(this.translations.code_image);
    });
  }

The getPicture method returns a promise which returns either a base64 string or a file URI. In my case I return an URI but just by changing the options destinationType to this.camera.DestinationType.DATA_URL you will get a base64 string and into the then statement: let base64Image = 'data:image/jpeg;base64,' + imageData;

Hope it helps you!