Nativescript-Angular cant set selected image to local variant about nativescript-imagepicker

[PanayotCankov]

Use the getImage instead decodeUri on the selected: https://github.com/NativeScript/nativescript-imagepicker/blob/release/source/imagepicker.d.ts#L45
Also if you are going to use functions for the then and catch callbacks of the promises, you will probably have to add a:

var that = this;

before the var context = ... and then at the end that.pic_list.push(...)

[christo-pr]

Not sure if this issue should be closed, im having the same problem and im using arrow functions, i can get the value but only inside the function, even if i console log the same variable, inside the function will have the value, but outside it's undefined.

code:

maint.ts:

export function onSelectSingleTap(args) {
    let context = imagepicker.create({ mode: "single" });
    startSelection(context, true);
}

function startSelection(context, isSingle) {
    context
        .authorize()
        .then(function() {
            list.items = [];
            return context.present();
        })
        .then(function(selection) {
            console.log("Selection done:");
            selection.forEach(function(selected) {
                console.log("----------------");
                console.log("uri: " + selected.uri);
                if (isSingle) {
                    selected.getImage({ maxWidth: 200, maxHeight: 200, aspectRatio: 'fill' })
                    .then((imageSource) => {
                        imageSrc.src = imageSource;
                        model.base64Image = imageSource.toBase64String('png');
                        console.log('model.base64Image: ', model.base64Image);
                    });
                } else {
                    imageSrc.visibility = 'hidden';
                }
            });
            list.items = selection;
        }).catch(function (e) {
            console.log(e);
        });
}

export function chek64() {
  console.log('model.base64Image: ', model.base64Image);
}

app.model.ts:

export class AppModel {

  private _base64Image: string;

  private _imageSource: string;

  constructor() {}

  public get base64Image(): string{
    return this._base64Image;
  }

  public set base64Image(value: string) {
    this._base64Image = value;
  }

  public get imageSource(): string{
    return this._imageSource;
  }

  public set imageSource(value: string) {
    this._imageSource = value;
  }
}

after upload the image i can see the base 64 code in the console, but just after that i call the function check64 and i get undefined on the same variable!

[christo-pr]

Weird thing! if i instance the model in the same method it work's

code:

function startSelection(context, isSingle) {
    model = new AppModel();
    context
        .authorize()
        .then(function() {
            list.items = [];
            return context.present();
        })
        .then(function(selection) {
            console.log("Selection done:");
            selection.forEach(function(selected) {
                console.log("----------------");
                console.log("uri: " + selected.uri);
                if (isSingle) {
                    selected.getImage({ maxWidth: 200, maxHeight: 200, aspectRatio: 'fill' })
                    .then((imageSource) => {
                        imageSrc.src = imageSource;
                        model.base64Image = imageSource.toBase64String('png');
                        console.log('model.base64Image: ', model.base64Image);
                    });
                } else {
                    imageSrc.visibility = 'hidden';
                }
            });
            list.items = selection;
        }).catch(function (e) {
            console.log(e);
        });
}

export function chek64() {
  console.log('model.base64Image: ', model.base64Image);
}

before this i was creating the instance when the page loaded

[christo-pr]

Note*: The code above just fix the issue if you don't have any problem creating a new instance each time a user upload a photo, it didn't work for me since i can't create a different instance of the model each time a user upload a photo, so i'm still having the issue, im thinking that's maybe something with the context.

export function onSelectSingleTap(args) {
    let context = imagepicker.create({ mode: "single" });
    startSelection(context, true);
}

export function startSelection(context, isSingle) {
    context
        .authorize()
        .then(() => {
            list.items = [];
            return context.present();
        })
        .then((selection) => {
            selection.forEach((selected) => {
                if (isSingle) {
                    selected.getImage({ maxWidth: 200, maxHeight: 200, aspectRatio: 'fill' })
                    .then((imageSource) => {
                        imageSrc.src = imageSource;
                        base64code = imageSource.toBase64String('png');
                        set64();
                    });
                } else {
                    imageSrc.visibility = 'hidden';
                }
            });
            list.items = selection;
        }).catch( (e) => {
            console.log(e);
        });
}

export function set64() {
  console.log('base64code: ', base64code);
  model.base64Image = base64code;
  console.log('model.base64Image: ', model.base64Image);    // base64 string correctly printed
  console.log('model.imageSource: ', model.imageSource);   // This print a static value 'TEST'
}

export function check64() {
  console.log('+++++++++++++++++++++++++++++++++++++++++++');
  console.log('model.imageSource: ', model.imageSource); // This print the same static value 'TEST'
  console.log('model.base64Image', model.base64Image);  // undefined
}

when i upload a photo i get the console.logs form the set64 function and they show me the correct information, but then with a button i call the check64 function and even though i have the same value when access other property, model.base64Image prints undefined.

[christo-pr]

FYI, i was able to fix this by creating a variable inside the same file where i call the function to take a picture, but into a 'global' context
When the page loaded it triggers a function, and i was creating the model inside that function:

// Created this variable inside the global context and use it to store the information inside the imagepicker callback
 let imageBase64String: string; 
export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    model = new AppModel()
    list = page.getViewById("urls-list");
    imageSrc = page.getViewById("imageSrc");
}
...

So just before save my model i assign the value of imageBase64String to the correct property inside the model, and it works.

not sure if that's the right solution, but i couldn't find anything else to make it work.