The change of data in controller doesn't update automatically

Ionic Framework ionic-v3
21

What does your console says about the image chosen?

22

It shows my image url correct.

Actually I tested two different cases. One is using FILE_URL, the other is DATA_URL. The second case the console will show my image base64 data.

23

Is that running on the browser or the device?

24

Browser doesn’t support cordova plugin. My testing is on device or emulator.

25

it doesn’t work on neither of them?

I am asking because sometimes a pic did work on my Android 5.1 but not in my 4.0 device

26

I’m testing on ios. Maybe I should try on android too.

The image pick part works well. Because the image will be shown correctly after I pick the image and wait for a while and click a button or scroll my UI (this could cause the view refreshed?).

I also tried to set a existing fixed url inside my window.imagePicker.getPictures callback without success. But if I set the image outside the callback, then everything is fine.

27

Oh yeah now that I remember. I had a problem with my code where I had an array outside the method that had the promise inside that for some reason I couldn’t for any reason make the array equal the result. so what I did was make a local var equal the array so then the result I would make it equal the local var. Because making an array equal another array copy the exact same thing (is like what pointer in C++) it would copy it to my original array;

Ex:

class food {
var array = [];

myMethod(){
    var newArray = array;
    Promise.resolve((result) => newArray =result);
    }
}

in your case I think this will solve it considering this is TypeScript.

export class NewPostPage {
  constructor(app: IonicApp, nav: NavController, params: NavParams) {
    this.nav = nav;
    this.thumbnail = 'img/placeholder.png';
    //whenever I used this.variable inside the constructor I do another variable outside so I       can use the variable I initialized anywhere I want. 
  }

//this variable same as the one inside the constructor if this is TypeScript :/
var thumbnail:any;


  imagePick() {
    var self = this;
    var newThumbnail;
    return new Promise(function(resolve,reject) {
      window.imagePicker.getPictures(function(results) {
        for (var i = 0; i < results.length; i++ ) {            
          newThumbnail = results[i];
          return resolve(result[i]);
        }
      }, function(error) {
        return reject(error);
      });
     self.thumbnail = newThumbnail; //This is supposed to go inside the method and is supposed to be the last line just in case this isn't it and made an error :/
    }
  }
28

Don’t quite understand why you have this (I’m not using TypeScript):

var thumbnail:any;

When you assign the self.thumbnail = newThumbnail. The newThumbnail is empty, am I right?

29

I think there is no need to use promise in my imagePick() function. I did the following test:

imagePick() {
  setTimeout(()=> {
    this.thumbnail = 'https://www.google.nl/images/srpr/logo4w.png';  
  },1000);
}

This works fine.

But this one doesn’t work:

var options = {
  quality : 75,
  destinationType : Camera.DestinationType.FILE_URL,
  sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
  encodingType: Camera.EncodingType.JPEG,
};

navigator.camera.getPicture((imageUrl)=>{
  this.thumbnail = 'https://www.google.nl/images/srpr/logo4w.png';      
}, (error)=>{
  this.util.showError(this.nav,error);
}, options);

So I think the problem is in the callback of the navigator.camera.getPicture.

30

Ok take out any (:any) I’ve used.

No newThumbnail has the results[i] value.

What I did before worked in Typescript. Dont now about JavaScript though but it doesn’t hurt to try.

31

It reminds something happended when I wrote ios application. It looks like the update of the UI is in an non UI thread (main thread) which cause the similar problem.

1 Like
32

So did it work? Was that the problem?

33

Sorry. I tried your method. Not working.

So that I removed the promise. Still not working. Then I tried add a timer before I set the thumbnail. No luck. Really don’t know what to do.

34

`It shows my image url correct.

Actually I tested two different cases. One is using FILE_URL, the other is DATA_URL. The second case the console will show my image base64 data.`

After reading this, have you tried using the atob() method when getting the DATA_URL?

35

Sorry, what is atob(), ascii to binary? I never use that. Instead I add some prefix to the data so that ionic will treat it as base64 data and render it correctly.

36

Is a js method to decode base64 image data.

Like
Var image = " base64 data";
image = atob(image).

37

My imageData is from a DATA_URL. It will be a valid base64 image data by adding “data:image/jpeg:base64” in front.

38

I see. Here is what I did:

‘data:image/jpeg;base64,’ + imageData
Which works for ng-src in ionic 1 and it should work in [src] in ionic 2 too because I can see the image correctly after I scroll may page after the image picked from photo library.

It did that? I used the atob() when I was doing an app I made last year and it worked fine.
I use to do this because I put my image data as a base64 string on my database and then pass it to my src as a string

something like this.

[src]=“method(imageData)”

Where in the code you have this

method(imageData){
return window.atob(imageData);
}

PS: I am unsure if you can return a method in the src. But you do have to change the base 64 to a string using the atob() I mentioned before.

39

Finally found a workaround:

In my constructor:

constructor(app: IonicApp, nav: NavController, params: NavParams,private _zone : NgZone) {

Inside the image pick callback

navigator.camera.getPicture((imageData)=>{
  this._zone.run(()=>  this.thumbnail = 'data:image/jpeg:base64' + imageData)     
}

But it only works for DATA_URL. Maybe [src] doesn’t recognize FILE_URL?

3 Likes
40

I found the FILE_URL also work if I don’t run it in livereload mode.

So the key is to use this._zone.run and need DI in constructor. Case closed.