UI Working but NO Image

[mrzanirato]

Hello,

the plugin seems to work correctly but I receive some errors and no image in console.log

CONSOLE LOG file: node_modules/@nativescript/core/ui/frame/frame-common.js:581:0: topmost() is deprecated. Use Frame.topmost() instead.
CONSOLE LOG file: node_modules/@nativescript/core/image-source/image-source.ios.js:344:0: fromNativeSource() is deprecated. Use ImageSource constructor instead.
CONSOLE LOG file: node_modules/@nativescript/core/image-source/image-source.ios.js:314:0: fromAsset() is deprecated. Use ImageSource.fromAsset() instead.
CONSOLE LOG file: src/app/modals/image/image.component.ts:49:28: {
"response": "Success",
"image": {
"ios": {}
}

Can you help, please?
Thanks

Marco

[shiv19]

Hi Marco,
that is the expected log output when you log the response from this plugin.
The image object can't be displayed in the console. And what you've sent there is exactly what is expected to be printed to console.

[shiv19]

https://github.com/bthurlow/nativescript-imagecropper/blob/master/service-example/image-upload-service.js
this file has a good example of how the response from this plugin can be used.
I'm currently using the exact same code with the latest version of nativescript :)

[mrzanirato]

Thanks for you super fast reply and the great plugin!

[mrzanirato]

I am trying the code you suggested, but I get some errors
Can you help, please?

[shiv19]

since you're using typescript, you'll have to declare those variables outside the constructor before using them.

so below the line export class ImageUploadService...
you can add

static _instance: ImageUploadService;
_imageCropper: any;

[mrzanirato]

Fantastic!
And the last one

[shiv19]

You can see here that I'm unboxing the selection before using it.

looking at your core you're doing const selection = await ...

so you can do

if (selection && selection[0]) {
 selection[0].getImageAsync(...

[mrzanirato]

Thanks shiv19, I'm getting closer ... now I can open the gallery, choose an image, crop, and start uploading.
In console log I can see the image name , the folder.
Now I have a problem I think referencing the image reference on page.

I get this error:

CONSOLE LOG file: node_modules/@angular/core/fesm5/core.js:26256:0: TypeError: undefined is not an object (evaluating 'nativescript_core_ui_frame__WEBPACK_IMPORTED_MODULE_5_["Frame"].getFrameById('rootFrame').currentPage')

Thanks again

[mrzanirato]

OK I managed to upload the image on the server.
Now I have to figure out how to reference the image and change the src
shiv19, thanks again for your time, your work and your help!
Marco

[mrzanirato]

It seems that in Angular I can't use getViewById but instead I should use something like

@ViewChild('profilePic',{static: false}) private profilePic: ElementRef

Any suggestion?

Thanks again
Marco

[shiv19]

yes you can use view child method and then do something like this.profilePic.nativeElement to access the {N} widget :)