Can't select iCloud images

[3rror404]

I know this has been covered before here and here but both issues are closed and the provided solution doesn't work for me.

When selecting an image stored in iCloud, .getImage() fails with "Error: The image could not be created."

context
  .authorize()
  .then(function() {
    return context.present();
  })
  .then(function(selection) {
    console.log("Selection done:");

    selection.forEach(function(selected) {
      console.log(" - " + selected.uri);

      selected.getImage().then(function(imagesource) {
        console.log('selected.getImage() - success');

      }).catch(function(error) {
        console.log(error); // => Error: The image could not be created.
      });
    });
  }).catch(function(e) {
    console.log(e);
  });

Am I doing something incorrectly?

Thanks

┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 2.5.5           │ 3.0.1          │ Update available │
│ tns-core-modules │ 2.5.2           │ 3.0.1          │ Update available │
│ tns-android      │                 │ 3.0.0          │ Not installed    │
│ tns-ios          │ 2.5.0           │ 3.0.1          │ Update available │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

┌─────────────────────────────────┬─────────┐
│ Plugin                          │ Version │
│ moment                          │ ^2.18.1 │
│ nativescript-audio              │ ^2.1.5  │
│ nativescript-background-http    │ ^2.5.1  │
│ nativescript-bitmap-factory     │ ^1.7.1  │
│ nativescript-carousel           │ ^2.4.1  │
│ nativescript-geolocation        │ 0.0.19  │
│ nativescript-google-maps-sdk    │ ^1.4.3  │
│ nativescript-imagepicker        │ ^2.5.2  │
│ nativescript-iqkeyboardmanager  │ ^1.0.1  │
│ nativescript-permissions        │ ^1.2.3  │
│ nativescript-push-notifications │ ^0.1.2  │
│ nativescript-telerik-ui         │ ^1.6.2  │
│ nativescript-theme-core         │ ^1.0.4  │
│ nativescript-videoplayer        │ ^2.6.1  │
│ tns-core-modules                │ 2.5.2   │
└─────────────────────────────────┴─────────┘

[3rror404]

Could anyone help with this?

[tsonevn]

Hi @3rror404,
Could you provide sample project, which could be debugged locally? I tested this issue with sample-ImageUpload application while using latest NativeScript 3.0 and selecting the image from iCloud works as expected.
In the meantime could you also upgrade to latest NativeScript 3.0 and nativescript-imagepicker 3.0.1 and verify, whether you will have the same problem.

[3rror404]

Hi @tsonevn,

Here is a N2.5.5 version using [email protected]: https://github.com/3rror404/nativescript-image-picker-issue90-v2.5.2

And here is a N3.0.1 version using [email protected]: https://github.com/3rror404/nativescript-image-picker-issue90-v3.0.1

Both give me the exact same error unfortunately.

[tsonevn]

Hi @3rror404
Thank you for the both sample projects.
I tested both on our iOS devices, however, the image selected from the iCloud is downloaded properly and Sucess message is displayed on the screen.

Something that you could check whether the network connection is established and if this issue happens while you are using the Mobile network or Wi-Fi connection.
It would also help if you could provide info about the device, which you are using while building the app.

[3rror404]

Thanks for looking into this.
I'm currently testing on an iPhone 6 iOS 10.3.1. I do have other devices on other OS versions but not with me right now.

Same error on WiFi (I have a 500mb/s up and down connection. Strong signal) or mobile network (4G. Strong signal).

[3rror404]

Hi @tsonevn,

I've tested this on a couple of different devices now and all behave in the same way.

Are you positive that you are testing with images stored in iCloud? The reason I ask is that it is actually difficult to tell where an image is stored. The only way I have found to know for sure is to pinch-zoom a photo in Photos.app and look for the download icon that appears in the bottom right corner (see screenshot). Obviously once the photo has downloaded it is now stored locally so you need to test with a different image.

[tsonevn]

Hi @3rror404,
I tested your case ones again and was able to reproduce this issue on my side on iOS device. Thi issue is reproduced when an image has been stored on the iClound and the Photos & Camera settings and Optimize iPhone Storage is activated. In this case, the full-resolution photos and videos are replaced with optimized version and will lead to an issue while selecting an image with nativescript-imagepicker.
A possible workaround at this time is to select Download and Keep originals in Photos & Camera.

[wbancer]

I have also encountered this error as well.
Is there a way to retrieve the image?

I'm not in position to tell people "stop using optimize function", and iPhone suggest it when you run low on space. Is there a way to access data through native iOS API?

[wbancer]

I did some digging, and for me it started to work after small update to imagepicker.ios.ts.
I've created PR for that #121
I hope this will help :)

[radeva]

Thank you @wbancer for providing a fix. It is now merged and published in version 4.0.0.

[tomshabtay]

Hi, this bug still happens to me after updating the plugin to 4.0.1.
I tried to choose a image from gallery while Optimize iPhone Storage was activated and it didn't work.

[tigrenok00]

@radeva

[radeva]

Hi @tomshabtay,

Could you give us more info regarding:
version of IOS
emulator or device
could you reproduce it in an example on play.nativescript.org, repo or .zip

[tomshabtay]

Hi @radeva,

I reproduced the bug on iPhone 5s emulator (Ios: 11.2) and also on the same physical device.
after I selected the image i could see that the selection array include the image but getImage didn't work.

The code that useing the imagepicker:

`let context = imagepicker.create({
                mode: "single" // use "multiple" for multiple selection
            });
            context
                .authorize()
                .then(function () {
                    return context.present();
                })
                .then((selection) => {
                    console.log(selection.length)
                    
                    selection.forEach((selected) => {
                        let image = new MyImage();
                        //Selected Image to base 64 string
                        selected.getImage().then(
                            (img) => {                                
                                let imgbase64 = img.toBase64String("png", 90);
                                let source = new imageSource.ImageSource();
                                source.loadFromBase64(imgbase64);
                                let date = new Date();
                                let folder = fs.knownFolders.documents().path;
                                let fileName = Config.currentUser.userId + "_" + this.tempId + "_" + date.getTime() + ".png";
                                let path = fs.path.join(folder, fileName);
                                let saved = source.saveToFile(path, "png");
                                if (saved) {
                                    image.imageSrc = path
                                    image.imageFileName = fileName;
                                }

                                if (this.reportImages.length < 1) {
                                    this.reportImages.push(image);
                                } else {
                                    this.reportImages[0] = image;
                                }
                                let binarySource = fs.File.fromPath(image.imageSrc).readSync(err => { });
                                image.binary = binarySource;
                                image.tempId = this.tempId.toString();
                                this.imageCnt++;
                                this.singleImage = image;
                            },
                            (error) => {
                                console.log(JSON.stringify(error));
                            }
                        );

                    });
                }).catch(function (e) {
                    console.log(JSON.stringify(e));
                });
        }`

Related settings:

i also included the project package.json and the imagepicker package.json.

Thanks,
Tom
imagepicker-package.json.txt
project-package.json.txt

[tigrenok00]

Hi @radeva , did you manage to recreate the problem with these versions? Thanks

[romulowspp]

Please reopen this ticket, the problema are happening here. When Optimize are enable.

[nuno-morais]

Same issue here

[parliament718]

Experiencing this issue too on {N} 4.1.1 and ImagePicker 6.0.2, when Optimize iPhone Storage is enabled. In my case source.fromAsset() throws an error for images in iCloud. The catch block fires with a "null" error.

  context
            .authorize()
            .then(() => context.present())
            .then((selections: ImageAsset[]) => {
                
                selections.forEach(imageAsset => {
                    const source = new imageSourceModule.ImageSource();
                    
                    source.fromAsset(imageAsset)
                           .catch(error => {
                               console.log('Error selecting image: ' + JSON.stringify(error));
                          });
                });
            })

[JakubPawlak]

Same here on {N} 4.2.0 and imagePicker 6.0.3. Any workaround?

[3rror404]

Hey guys, I fixed this in an older version of the plugin. The issue is that PHImageManger needs to have the .isNetworkAccessAllowed option set to true.

Now that the plugin uses the QBImagePicker CocoaPod, the issue needs to be resolved there.

[JakubPawlak]

Ok, my fault. Tried to take the name from imageAsset when there was no asset yet

[tbozhikov]

@tomshabtay @parliament718
The problem when Optimize Storage is checked could be related to the images still not downloaded. I found a thread with a possible workaround using requestImageDataForAsset. Translated to NativeScript this should look like:

if (ios) {
    const options = PHImageRequestOptions.new();

    options.synchronous = true;
    options.version = PHImageRequestOptionsVersion.Current;
    options.deliveryMode = PHImageRequestOptionsDeliveryMode.HighQualityFormat;
    options.networkAccessAllowed = true;
    PHImageManager.defaultManager().requestImageDataForAssetOptionsResultHandler(imageAsset.ios, options, (nsData: NSData, dataUTI: string, orientation: UIImageOrientation, info: NSDictionary<any, any>) => {
        if (info.valueForKey(PHImageResultIsInCloudKey)) {
            // Image is in iCloud
            if (nsData) {
                // Image is downloaded
                // Try using the imageAsset here 
                const someFolderPath = knownFolders.temp().getFolder("nsimagepicker").path;
                const someFilePath = path.join(someFolderPath, `${Date.now()}.jpg`);
                nsData.writeToFileAtomically(someFilePath, true);
                // image is stored to file at 'someFilePath'
            }
        }
    });
}

Could you try this way and let us know how it goes? Hope it helps.

[diadal]

iOS keep given this error Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: sourceNode' any idea how to fix this native script-Vue android work perfect

if (PlatformModule.isAndroid) {

                permissions.requestPermission(android.Manifest.permission.READ_CONTACTS)
                  .then(function() {
                     console.log("Woo Hoo, I have the power!");
                  })
                  .catch(function() {
                     console.log("Uh oh, no permissions - plan B time!");
                  });

                }
                var dd = this.user;
                context .authorize()
                        .then(function() {
                            return context.present();
                        }).then(function(selection) {
                            setTimeout(() => {

                                selection.forEach(function(selected) {
                                console.log(selected)

                                if (selected.android) {
                                    dd.image = selected;  
                                }

                             });
                                
                            }, 1000);

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

[foxted]

I can confirm this issue is still happening on iOS 13, with NativeScript Vue 2.4.0, tns-core-modules 6.2.0-next-2019-10-08-131118-02 and tns CLI version 6.1.2

[foxted]

Seems like there is a pending PR that would solve the problem on the underlying library, QBImagePicker. But that library hasn't been updated in a few years :/

nek023/QBImagePicker#180 (reference)