0

I am using DevApp from Ionic team to test application. And want to implement just an image upload functionality, but cannot get image from device by FILE_URI.

My ionic info:

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.3.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.1
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : C:\Android\sdk

Misc:

    backend : legacy

I want to choose a picture from photo library or take a new on using camera, then show the image to the user. But it cannot find image by image path.

takePicture(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: sourceType,
      destinationType: this.camera.DestinationType.FILE_URI
    }

    this.camera.getPicture(options).then((image) => {
      this.form.imageData = image;

     }, (err) => {
        console.log('error: ' + JSON.stringify(err));
     });
  }

And in the page I pass the file_uri to the component:

<img [src]="form.imageData" [hidden]="!form.imageData" />
{{form.imageData}}

form.imageData is a text data:

file:///var/mobile/Containers/Data/Application/.../tmp/photo_002.jpg

But it does not show any image.

What I am doing wrong? How to test image upload/preview functionality using Ionic DevApp?

PS. I can preview image using its base64 data instead of file uri, but for upload I should use file_uri.

0bj3ct
  • 1,400
  • 4
  • 22
  • 51
  • 1
    so the "image" that you get after getPicture call - you already validated that it is a valid data? what format is that? blob? base64? sorry i dont recall what is returned by camera plugin here – Sergey Rudenko Jan 26 '18 at 18:08
  • 1
    when you inspect the element (img) - what does it show you? – Sergey Rudenko Jan 26 '18 at 18:10
  • It returns a text representation of file path like 'file:///var/mobile/Containers/Data/Application/.../tmp/photo_002.jpg'. And I pass this value to an image element source "" but it does not show the image. I read that the devapp does not support file plugin, but I'm not sure about that. My task is simple: 1) Take an image or choose one from library (done); 2) Show image to the user (image is not displayed on the page); 3) Upload image with other form data to the server (cannot get image from device); I will be thankful if you can help me with these tasks. – 0bj3ct Jan 30 '18 at 07:34
  • Did you try this answer: https://stackoverflow.com/questions/36860816/use-file-uri-from-camera-plugin-in-ngsrc . And also did you inspect the element? what does it show? can you post result of element inspection (you can do that via dev mode in chrome, find the img element and post what is in there) – Sergey Rudenko Jan 30 '18 at 18:28
  • Most likely this is connected with security policy. But to make sure it is - we need inspection data – Sergey Rudenko Jan 30 '18 at 18:29
  • hey got a solution here..https://stackoverflow.com/questions/42785838/using-cordova-plugin-camera-to-display-image/42796752#42796752 – Moses Feb 19 '18 at 20:42

0 Answers0