Cannot read a file using cordova file plugin in an Ionic 2 project

Question

I\'m trying to use the Cordova file plugin to read an image saved in a mobile device so I can then get the base64 encoding of it, which I need to store remotely. The problem

Answer 1

I discovered that this problem was related to Typescript. resolveLocalFilesystemUrl() was actually resolving with a File Entry object (when I passed it a local url as the file path), but Typescript thought it was an Entry object and didn't think file() could be called on it.

The below fixed the issue by telling Typescript that entry object could be of any type, so could have any function or property called on it.

MediaCapture.captureImage().then((images)=>{
  self.image = images[0].localURL;
  File.resolveLocalFilesystemUrl(self.image).then((entry: any)=>{
    entry.file(function (file) {
      var reader = new FileReader();

      reader.onloadend = function (encodedFile: any) {
        var src = encodedFile.target.result;
        src = src.split("base64,");
        var contentAsBase64EncodedString = src[1];
      };
      reader.readAsDataURL(file);
    })
  }).catch((error)=>{
    console.log(error);
  })
})

Note that I also had to use encodedFile: any in order to allow target.result to be called on encodedFile

Answer 2

I had a similar Problem in Ionic3 with @ionic-native/camera, the error was being given by destinationType: this.camera.DestinationType.FILE_URI and I solved it changing it to destinationType: this.camera.DestinationType.DATA_URL. This is how my Project looks like:

import { Camera, CameraOptions } from '@ionic-native/camera';
import { Image } from '****';

export class CameraService {
  public readonly cameraOptions: CameraOptions = {
    sourceType: this.camera.PictureSourceType.CAMERA,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    correctOrientation: true
  };

  constructor(public camera: Camera) { }

  public takePicture(): Observable<Image> {
    return Observable.fromPromise(this.camera.getPicture(this.pictureOptions)).map(imageSrc => {
      this.base64Image = 'data:image/jpeg;base64,' + imageSrc;
      return new Image('CameraPhoto.jpeg', this.base64Image);
    });
  }
}

Class Image looks like

export class Image {
  public readonly name: string;
  public readonly fileURI: string;
  public readonly file?: File;

  constructor(name: string, fileURI: string, file?: File) {
    this.name = name;
    this.fileURI = fileURI;
    this.file = file;
  }
}

I hope it could help someone. Cheers!

Answer 3

That is because resolveLocalFilesystemUrl is window object's function and not file.

MediaCapture.captureImage().then((images)=>{
  self.image = images[0].localURL;
  window.resolveLocalFilesystemUrl(self.image).then((entry)=>{
    entry.file(function (file) {
      var reader = new FileReader();

      reader.onloadend = function (encodedFile) {
        var src = encodedFile.target.result;
        src = src.split("base64,");
        var contentAsBase64EncodedString = src[1];
      };
      reader.readAsDataURL(file);
    })
  }).catch((error)=>{
    console.log(error);
  })
})

Or you could use ionic native version of the same plugin here