Nativescript bind value inside image-picker function

[madsongr]

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.

[DimitarTachev]

Hi @madsongr,

Did you try with the selected object?

The image view (the xml image) is directly working with Image Assets and it should work out of the box with the Image Picker result.

[madsongr]

@DimitarTachev hi,
Yes I did. I can log the path everytime in many examples but it's not displaying the image in xml view.

[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;
}

[madsongr]

@NickIliev yes, I noticed that working on another project. I fixed my code like below:

public thumb:string;

...
}else if(result == "Gallery"){

	this.set("thumb", "");
				
		let context = imagepicker.create({
			mode: "single"
		});

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

			selection.forEach((selected) => {
											
				selected.getImage().then((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.set("thumb", localPath);
						console.log("if localPath: " + localPath);
					}

				});
						
				console.log(JSON.stringify(selected.android));
						
				});					

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

I'm getting an error if I try to open gallery again to choose another image and replace the first one:

System.err: java.lang.RuntimeException: Unable to resume activity {com.habitodigital.TSAssistence/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
System.err: Calling js method onStart failed
System.err: Error: java.lang.OutOfMemoryError: Failed to allocate a 23970828 byte allocation with 16777216 free bytes and 18MB until OOM
System.err:     dalvik.system.VMRuntime.newNonMovableArray(Native Method)
System.err:     android.graphics.BitmapFactory.nativeDecodeStream(Native Method)
System.err:     android.graphics.BitmapFactory.decodeStreamInternal(BitmapFactory.java:635)
System.err:     android.graphics.BitmapFactory.decodeStream(BitmapFactory.java:611)
System.err:     android.graphics.BitmapFactory.decodeFile(BitmapFactory.java:391)
System.err:     org.nativescript.widgets.image.Fetcher.decodeSampledBitmapFromFile(Fetcher.java:409)
System.err:     org.nativescript.widgets.image.Fetcher.processBitmap(Fetcher.java:256)
System.err:     org.nativescript.widgets.image.Worker.loadImage(Worker.java:114)
System.err:     org.nativescript.widgets.ImageView.loadImage(ImageView.java:191)
System.err:     org.nativescript.widgets.ImageView.setUri(ImageView.java:179)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
...

I tried to clean the path everytime I open the gallery but it did not work:

this.set("thumb", "");

[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

[madsongr]

@NickIliev can I use nativescript-image-cache to clear the cache? Would it work for this purpose?