Image upload issue on Ionic DevApp

1.1k views Asked by At

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.

0

There are 0 answers