How does File.readAsDataUrl work?


#1

Hello,

I’m using Ionic 2’s native camera and file in my app. I want to access the content of the picture after it is taken. I installed cordova-plugin-camera and cordova-plugin-file however I’m really unclear about how to use the file plugin. Here’s my code:

takePicture() {
      Camera.getPicture({
          destinationType: Camera.DestinationType.FILE_URI,
          saveToPhotoAlbum: true,
          allowEdit: false
      }).then((imageURI) => {
          this.imageURI = imageURI;
          var imagePath = imageURI.substr(0, imageURI.lastIndexOf('/') + 1);
          var imageName = imageURI.substr(imageURI.lastIndexOf('/') + 1);

          File.readAsDataURL(cordova.file.applicationDirectory, imageName)
              .then(function (base64Img) {
                  console.log(base64Img);
              })
              .catch(function (err: TypeError) {
                  console.log(err.message);
              });

          CordovaExif.readData(this.imageURI, function (exifObject) {
              this.exif = exifObject;
              console.log(exifObject);
          });

      }, (err) => {
          console.log(err);
      });
  }

When I ran it on browser I got an error “Uncaught TypeError: Cannot assign to read only property ‘message’ of object ‘#’” and base64Img returned nothing. Also it doesn’t work on iOS. How to read the content of the picture after saving it on storage?


#2

Hi, have you found a solution to your problem. It could help, because I’m facing the same issue.


#3

I’m also looking how to use this method. Any ideas?


#4

@dimitri320 @guoyangrui
There you go, try this.

takePicture() {


let options: CameraOptions = {
      destinationType: Camera.DestinationType.NATIVE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
      encodingType: Camera.EncodingType.PNG,
      targetHeight: 250,
      targetWidth: 250,
      allowEdit: true,
      quality: 10,
      saveToPhotoAlbum: false
    };
    Camera.getPicture(options).then((imageUri) => {
        console.log('file received: ', imageUri);

        let nameFile = imageUri.replace(cordova.file.externalCacheDirectory, '');
        console.log('file name: ', nameFile);
        File.readAsDataURL(cordova.file.externalCacheDirectory, nameFile).then(
          file64 => {
            console.log('file in 64: ', file64);
              let fileWithoutExtension = ('' + file64 + '').replace(/^data:image\/(png|jpg);base64,/, '');
              console.log(fileWithoutExtension);
          
          }).catch(err => {
          console.log('booooooo');
        });
      },
      (err) => {
          console.log('booooooo');
      });
}

#5

Hello, this is not working, I tried the same and it return the first error console.log(‘booooooo’); please help


#6

console.log the error, not booo. Then you’ll know what you’re looking at.


#7

That shows this: [object Object]

This is my code
this.file.readAsDataURL(‘file:///storage/emulated/0/Download/imagenes-gif-para-fondos-para-celular.gif’, ‘imagenes-gif-para-fondos-para-celular’).then(result => {
this.imageUpload = result;
alert(result)
}, (err) => {
alert(err);
});

Thank you for your answer!


#8

I don’t see console.log in the code you posted.


#9

it is the alert(err) if I write console log instead, it will show it on the terminal but it shows the same, the alert or the console.log.

As you can see, now im using the console.log instead of the alert, is doing the same.


#10

JSON.stringify may give more useful information.


#11

Than you! Now I have this, {“code”:13,“message”:“input is not a directory”}
Its better than before but I still dont understand whats my mistake xd


#12

Is this happened on android or ios device? because the directory to look into are different depending on device you’re using.

For example:

destinationType: (Platform.is('ios'))?this.camera.DestinationType.FILE_URI:this.camera.DestinationType.NATIVE_URI,

#13

Hi did you got solution for this. As i’m getting same error that " input is not a directory "


#14

Yeah but solved it using this plugin https://ionicframework.com/docs/native/base64/


#15

Hi there ,

Can you share your total code , i got same error . :sob:
thanks ,


#16

and which one should use , file.readasDataUrl or base64


#17

Hey, in this tutorial we did an example of that! Hope it helps.