IOS : Selected image is empty

[kefahB]

Which platform(s) does your issue occur on?

• iOS
• emulator or device. What type of device?
  Tested on :
• IOS 10.2 on iPhone 6
• IOS 11.4 on iPhine 8 Plus

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
  4.1.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)

"tns-core-modules": "^4.1.0",

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)

"tns-android": {
"version": "4.1.3"
},
"tns-ios": {
"version": "4.1.1"
}

• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.7.1",
"typescript": "~2.6.2"
}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

I use your code with onSelectSingleTap method :

private startSelection(context) {
        context
            .authorize()
            .then(() => {
                this.imageAssets = [];
                this.imageSrc = null;
                return context.present();
            })
            .then((selection) => {
                console.log("Selection done: " + JSON.stringify(selection));
                this.imageSrc = this.isSingleMode && selection.length > 0 ? selection[0] : null;

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

                this.imageAssets = selection;
            }).catch(function (e) {
                console.log(e);
            });
    }

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

On IOS i get this after select image :

[{"_observers":{},"_options":{"keepAspectRatio":true},"_ios":{}}]

It work fine on android

Thank you

[NevinDry]

Hi,

I am using the same code and I got the same issue with an Ipad Air IOS 11.4.

Modules version

"tns-core-modules": "^4.1.0",
"tns-android": {
"version": "4.1.3"
},
"tns-ios": {
"version": "4.1.1"
}
"nativescript-imagepicker": "^6.0.2",

It's working fine on Android too.

[NevinDry]

Hi,

I have done some research on this issue, and here is how I fixed it

pickFile() {
        const that = this;
        that.context
            .authorize()
            .then(function () {
                return that.context.present();
            })
            .then(function (selection) {
                selection.forEach(function (selected) {
                    let file;
                    if (selected._android) {
                        file = fileSystemModule.File.fromPath(selected._android);
                        that.uploadFile(file);
                    }else{
                        imageSourceModule.fromAsset(selected).then((imageSource) => {

                        const folder = fileSystemModule.knownFolders.documents().path;
                        const fileName = "test.png"; 
                        const path = fileSystemModule.path.join(folder, fileName);
                        const saved = imageSource.saveToFile(path, "png");
                        if (saved) {
                            console.log("Image saved successfully!");
                            file = fileSystemModule.File.fromPath(path);
                            that.uploadFile(file);
                        }else{
                            //process error
                        }
                    });
                }
            });
            }).catch(function (e) {
                console.log(e);
                // process error
            });

You can see that first, I use the TNS imageSourceModule so don't forget to declare it at the top.

const imageSourceModule = require("tns-core-modules/image-source");

I use the fromAsset function directly on the "selected" because apparently with the new version of this plugin, "selected" is an Asset. So you got an imageSource and you can use the "saveToFile" function that will copy the Asset into a new location (get this location using fileSystemModule from TNS). Use the path of this new location for your UI, and the image will appear. You can also create a file object from this location ( fileSystemModule.File.fromPath(path); ), I use for upload.

I can help if you need more information.

[anorthwolf]

Environment:
OS 11.4 on iPhone 8 Plus simulator
Nativescript 4.2
nativescript-imagepicker 6.0.3

Hi, @NevinDry,
I tried your solution, it can get the image but the size is huge, my original image is 2 MB, and it becomes 20MB when uploading it.

I don't think the users will accept this. Any idea on this please? @kefahB

updated on 11.13:
I set the quality param as 50 to reduce image size.
imageSource.saveToFile(filePath, fileType, 50)

[falodunos]

@kefahB this is how I resolve this case for iOS and Android ....

import { ImageSource } from "tns-core-modules/image-source";
import { path, knownFolders } from "tns-core-modules/file-system";

    try {
      const image = event.view as Image;
      const imageSource = new ImageSource();

      const context = ImagePicker.create({
        mode: 'single'
      });

      context.authorize()
        .then(() => {
          return context.present();
        }).then(selection => {
          const imageAsset = selection.length > 0 ? selection[0] : null;

          imageAsset.options = {
            width: 400,
            height: 400,
            keepAspectRatio: true
          };

          imageSource.fromAsset(imageAsset)
            .then((imageSource: ImageSource) => {

              let saved = false;
              let localPath = "";
              let filePath = "";

              const folderPath: string = knownFolders.documents().path;
              let fileName = this.community.name ?
                this.community.name + "_communityImage_" + Date.now() : "communityImage_" + Date.now();

              if (imageAsset.android) {
                localPath = imageAsset.android.toString().split('/');
                fileName = fileName + "_" + localPath[localPath.length - 1].split(".")[0] + ".jpeg";
                filePath = path.join(folderPath, fileName);
                saved = imageSource.saveToFile(filePath, "jpeg");

                if (saved) {
                  image.src = imageAsset.android.toString();
                  this.community.avatar = filePath;
                }
              } else {
                const ios = imageAsset.ios;
                if (ios.mediaType === PHAssetMediaType.Image) {
                  const opt = PHImageRequestOptions.new();
                  opt.version = PHImageRequestOptionsVersion.Current;
                  PHImageManager.defaultManager().requestImageDataForAssetOptionsResultHandler(
                    ios, opt, (imageData: NSData, dataUTI: string, orientation: UIImageOrientation, info: NSDictionary<any, any>) => {

                      image.src = info.objectForKey("PHImageFileURLKey").toString();
                      localPath = image.src.toString().split('/');
                      fileName = fileName + "_" + localPath[localPath.length - 1].split(".")[0] + ".jpeg";
                      filePath = path.join(folderPath, fileName);
                      saved = imageSource.saveToFile(filePath, "jpeg");

                      if (saved) {
                        this.community.avatar = filePath;
                      }

                    });
                }
              }
            });
        }
        ).catch(err => {
          alert(err);
          console.log(err);
        });
    } catch (e) {
      alert('Opps, please select a valid image.');
      console.log(e);
    }
  }```

[falodunos]

@NevinDry Kindly check my solution here ..

https://github.com/NativeScript/nativescript-imagepicker/issues/197#issuecomment-431783669

[Skintillion]

This worked for me for uploading base 64. Much simpler implementation and no file copying.

var imageSourceModule = require("tns-core-modules/image-source");
var imagepicker = require("nativescript-imagepicker");
var imagePickerContext = imagepicker.create({ mode: "single" });

imagePickerContext
    .authorize()
    .then(function() {
        return imagePickerContext.present();
    })
    .then(function(selection) {
        selection.forEach(function (selected) {
            imageSourceModule
            .fromAsset(selected)
            .then((imageSource) => {
                var imageBase64 = imageSource.toBase64String("jpg",60);
                fetch(config.apiUrl + "image", {
                        method: "POST",
                        body: JSON.stringify({
                            image: imageBase64
                        }),
                        headers: {
                        "Authorization": "Bearer " + config.token,
                        "Content-Type" : "application/json"
                        }
                    })
                .then(handleErrors)
                .then(function(response) {
                    //Do something when done.
                });
            });
        });
    }).catch(function (e) {
        console.log(e);
        
    });

[vignesh-web]

Hi,

I have done some research on this issue, and here is how I fixed it

pickFile() {
        const that = this;
        that.context
            .authorize()
            .then(function () {
                return that.context.present();
            })
            .then(function (selection) {
                selection.forEach(function (selected) {
                    let file;
                    if (selected._android) {
                        file = fileSystemModule.File.fromPath(selected._android);
                        that.uploadFile(file);
                    }else{
                        imageSourceModule.fromAsset(selected).then((imageSource) => {

                        const folder = fileSystemModule.knownFolders.documents().path;
                        const fileName = "test.png"; 
                        const path = fileSystemModule.path.join(folder, fileName);
                        const saved = imageSource.saveToFile(path, "png");
                        if (saved) {
                            console.log("Image saved successfully!");
                            file = fileSystemModule.File.fromPath(path);
                            that.uploadFile(file);
                        }else{
                            //process error
                        }
                    });
                }
            });
            }).catch(function (e) {
                console.log(e);
                // process error
            });

You can see that first, I use the TNS imageSourceModule so don't forget to declare it at the top.

const imageSourceModule = require("tns-core-modules/image-source");

I use the fromAsset function directly on the "selected" because apparently with the new version of this plugin, "selected" is an Asset. So you got an imageSource and you can use the "saveToFile" function that will copy the Asset into a new location (get this location using fileSystemModule from TNS). Use the path of this new location for your UI, and the image will appear. You can also create a file object from this location ( fileSystemModule.File.fromPath(path); ), I use for upload.

I can help if you need more information.

Hi I have same issue. I was not able to get full image information in IOS like filepath, filename and size. Please help me.

[coderaven]

This worked for me for uploading base 64. Much simpler implementation and no file copying.

var imageSourceModule = require("tns-core-modules/image-source");
var imagepicker = require("nativescript-imagepicker");
var imagePickerContext = imagepicker.create({ mode: "single" });

imagePickerContext
    .authorize()
    .then(function() {
        return imagePickerContext.present();
    })
    .then(function(selection) {
        selection.forEach(function (selected) {
            imageSourceModule
            .fromAsset(selected)
            .then((imageSource) => {
                var imageBase64 = imageSource.toBase64String("jpg",60);
                fetch(config.apiUrl + "image", {
                        method: "POST",
                        body: JSON.stringify({
                            image: imageBase64
                        }),
                        headers: {
                        "Authorization": "Bearer " + config.token,
                        "Content-Type" : "application/json"
                        }
                    })
                .then(handleErrors)
                .then(function(response) {
                    //Do something when done.
                });
            });
        });
    }).catch(function (e) {
        console.log(e);
        
    });

Uploading in base64 works easiest, yes - but it does have some limitations in terms of speed as it gets quite slow as soon as the image gets bigger.

[aviban12]

ERROR Error: Uncaught (in promise): Asset '/storage/emulated/0/DCIM/Restored/IMG_20200115_103131.jpg' cannot be found.

Please tell me how to resolve this error?

[skmani]

i am also having the same issue any fixes.