Nativescript bind value inside image-picker function

I am using image-picker plugin. I can open images gallery and select single or multiple images.My problem is how to bind the path of the image to the xml image src?! It doesn’t work inside getImage() function.

<Image class="imageSource" src="{{ thumb }}" stretch="none" />

import { Observable } from 'data/observable';
import * as imagepicker from "nativescript-imagepicker";

var counter = 0;
var fs = require('file-system');

export class AssistenceViewModel extends Observable {

    thumb:any;

public addImage(){
    dialogs.action({
        message: "Opções", 
        cancelButtonText: "Cancelar", 
        actions: ["Câmera", "Galeria"]
    }).then(result => {

        console.log("Dialog result: " + result);
        if(result == "Câmera"){

            //Do action1
            console.log("Abrir camera");

        }else if(result == "Galeria"){

            console.log("Abrir galeria");
            let context = imagepicker.create({
                mode: "single"
            });

            context.authorize().then(function() {
                return context.present();
            }).then(function(selection) {

                selection.forEach(function(selected){

                    selected.getImage().then(function(imagesource){

                        var localPath = null;

                        if(platformModule.device.os === "Android"){
                            localPath = selected.android;
                            console.log("localPath android: " +localPath);
                        }else {
                            // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
                            let folder = fs.knownFolders.documents();
                            let path = fs.path.join(folder.path, "Test" + counter + ".png");
                            let saved = imagesource.saveToFile(path, "png");

                            localPath = path;
                            console.log("localPath iOS: " +localPath);
                        }

                        if(localPath){
                            this.thumb = localPath  // this is not working
                            console.log("thumb: "+this.thumb); // this is not working
                        }

                    });

                });                 

            }).catch(function(e) {
                console.log(e);
            });
        }
    });
  }
}

The result for console.log("localPath android: " +localPath);

localPath android: /storage/emulated/0/DCIM/Camera/IMG_20171213_224917038.jpg

but I cannot get any log for this.thumb.

I tried the examples from this repo and from image upload repo but it doesn’t work.

[NickIliev]

@madsongr in the case above you are hitting Out of Memory exception due to working with large files that are staying in the memory. Although you are resetting the observable property thumb the memory is not released until the GC is triggered by the JS virtual machine. You can workaround this by loading thumbs or images with smaller sizes (the method getImage() accepts options like maxWidth and maxHeight)

Article about working with image on Android and using the good practices to avoid OOM related errors can be found here

[NickIliev]

@madsongr there two things that need to be considered:

• when creating an observable property you should create an observable property with getter/setter with notifyPropertyChange instead of field thumb (or use ‘this.set()’ & ‘this.get()’) e.g.

    get thumb(): any {
        return this._thumb ;
    }
    
    set thumb(value: any ) {
        if (this._thumb !== value) {
            this._thumb = value;
            this.notifyPropertyChange('thumb', value)
        }
    }

• The second thing you need to consider is the meaning of this when using JavaScript function scope vs TypeScript arrow function

When using

.then(function(selection) { 
    // the meaning of this is different from the global context so use the "cached" context 
    that.thumb = newValue;

the meaning of this is not the global context so you should “cache” the meaning with var that = this; pattern (more here)

When using TypeScript arrow function you can preserve the meaning of this For example

.then((selection) => {
    // this is the same as the global this in your Observable model
    this.thumb = newValue;
}