[@nativescript/imagepicker] Error when trying to display a chosen picture

[rdlauer]

It's been a while since I've done any NativeScript development! But...I'm helping on a project and using the latest version of imagepicker (3.0.1) and the exact code that's used in the TypeScript example on Stackblitz. Unfortunately in the iOS Simulator I'm hitting this error and it doesn't display the image selected:

Selection done: [{"asset":{"_observers":{},"_options":{"keepAspectRatio":true,"autoScaleFactor":true},"_ios":{}},"type":"image","filename":"IMG_0002.JPG","originalFilename":"IMG_0002.JPG","filesize":2604768,"path":"/Users/roblauer/Library/Developer/CoreSimulator/Devices/D03B7B15-0D13-46D9-841C-6B22D72CEC83/data/Media/DCIM/100APPLE/IMG_0002.JPG"}]

  TypeError: Cannot set properties of undefined (setting 'width')

Reverting to 1.0.9 and it works just fine.

[NathanWalker]

Hi @rdlauer! Indeed 2.0 and above brought a small breaking change in the return result to provide more rich information noted here: https://github.com/NativeScript/plugins/tree/main/packages/imagepicker#installation - can see the Note in that section.

Looking at the SB sample looks like this:

imagePicker
      .authorize()
      .then(() => {
        return imagePicker.present();
      })
      .then((selection) => {
        console.log('Selection done: ' + JSON.stringify(selection));

just needs to be updated to this:

imagePicker
      .authorize()
      .then(() => {
        return imagePicker.present();
      })
      .then((selection) => {
        console.log('Selection done: ' + JSON.stringify(selection));
        this.set(
          'imageSrc',
          this.isSingleMode && selection.length > 0 ? selection[0].asset : null
        );

        // set the images to be loaded from the assets with optimal sizes (optimize memory usage)
        selection.forEach((item: imagePickerPlugin.ImagePickerSelection) => {
          item.asset.options.width = this.isSingleMode
            ? this.previewSize
            : this.thumbSize;
          item.asset.options.height = this.isSingleMode
            ? this.previewSize
            : this.thumbSize;
        });

        this.set(
          'imageAssets',
          selection.map((item, i) => ({ imageAsset: item.asset, index: i }))
        );
      })

This forked SB has the change: https://stackblitz.com/edit/nativescript-stackblitz-templates-1byxnc?file=package.json,app%2Fmain-view-model.ts

Stackblitz has a Wasm issue on file uploads at moment so if link doesn't run in Preview, you can run it locally. Let us know if that clears ya!

[rdlauer]

Dang, that was it! Thank you @NathanWalker and I have to say after coming back to {N} after all these years, the dev experience is really slick. 🙏

[NathanWalker]

Thank you for confirming, let us know any other snags - your feedback is always much appreciated!

[shiv19]

Welcome back @rdlauer 😄