1

I am using Nativescript with Angular and have a page where I photograph a receipt or add from gallery and add a couple of text inputs and send to server.

The Add from gallery is working fine in Android but not in iOS.

Here is the template code:

<Image *ngIf="imageSrc" [src]="imageSrc" [width]="previewSize" [height]="previewSize" stretch="aspectFit"></Image>

<Button text="Pick from Gallery" (tap)="onSelectGalleryTap()" class="btn-outline btn-photo"> </Button>

and the component:

    public onSelectGalleryTap() {
        let context = imagepicker.create({
            mode: "single"
        });
        let that = this;
        context
        .authorize()
        .then(() => {
            that.imageAssets = [];
            that.imageSrc = null;
            return context.present();
        })
        .then((selection) => {
            alert("Selection done: " + JSON.stringify(selection));
            that.imageSrc = selection.length > 0 ? selection[0] : null;
            // convert ImageAsset to ImageSource                        
            fromAsset(that.imageSrc).then(res => {
                var myImageSource = res;
                var base64 = myImageSource.toBase64String("jpeg", 20);                       
                this.expense.receipt_data=base64;                          
            })   
            that.cameraImage=null;
            that.imageAssets = selection;
            that.galleryProvided=true;

            // set the images to be loaded from the assets with optimal sizes (optimize memory usage)
            selection.forEach(function (element) {
                element.options.width = that.previewSize;
                element.options.height = that.previewSize;
            });
        }).catch(function (e) {
            console.log(e);
        });    
    }

I have posted below the Android and iOS screenshots of the line:

alert("Selection done: " + JSON.stringify(selection));

In Android there is a path to the location of the image in the file system but in iOS there are just empty curly brackets where I'd expect to see the path and then when submitted the message back is "Unable to save image" although the image preview is displaying on the page in Image.

Here are the screenshots:

Android:

enter image description here

iOS:

enter image description here

Any ideas why it is failing in iOS?

Thanks

==========

UPDATE

I am now saving the image to a temporary location and it is still not working in iOS. It works in Android.

Here is my code now.

import { ImageAsset } from 'tns-core-modules/image-asset';
import { ImageSource, fromAsset, fromFile } from 'tns-core-modules/image-source';
import * as fileSystem from "tns-core-modules/file-system";

...
...
    public onSelectGalleryTap() {
        alert("in onSelectGalleryTap");
        var milliseconds=(new Date).getTime();
        let context = imagepicker.create({
            mode: "single"
        });
        let that = this;
        context
        .authorize()
        .then(() => {
            that.imageAssets = [];
            that.previewSrc = null;
            that.imageSrc = null;
            return context.present();
        })
        .then((selection) => {

            that.imageSrc = selection.length > 0 ? selection[0] : null;
            // convert ImageAsset to ImageSource                        
            fromAsset(that.imageSrc)
            .then(res => {
                var myImageSource = res;

                let folder=fileSystem.knownFolders.documents();
                var path=fileSystem.path.join(folder.path, milliseconds+".jpg");
                var saved=myImageSource.saveToFile(path, "jpg");
                that.previewSrc=path;

                const imageFromLocalFile: ImageSource = <ImageSource> fromFile(path);

                var base64 = imageFromLocalFile.toBase64String("jpeg", 20);  

                this.expense.receipt_data=base64;                        
            })   
            that.cameraImage=null;
            that.imageAssets = selection;
            that.galleryProvided=true;

            // set the images to be loaded from the assets with optimal sizes (optimize memory usage)
            selection.forEach(function (element) {
                element.options.width = that.previewSize;
                element.options.height = that.previewSize;
            });
        }).catch(function (e) {
            console.log(e);
        });    
    }

Any ideas? Thanks.

chakotha
  • 85
  • 11
  • It's not actually an issue, iOS works quite differently here. It does not return the path to original image but just the PHAsset instance. You will have to write the image to your local folder if you want to access it by path later. – Manoj Mar 03 '20 at 15:41
  • @Manoj The image preview is showing up in the form. We are just seeking to send it to the server from local storage? – chakotha Mar 03 '20 at 17:40
  • 1
    Image preview shows it from PHAsset, you can check the source code. Image view can work with Image asset which do not hold original path to image in iOS but just the binary data. You will have to write the data to your app's storage to create a file path. – Manoj Mar 03 '20 at 19:00
  • I solved my problem using the code in your question in the "UPDATE" part! – Christopher Kikoti Aug 14 '21 at 09:25

1 Answers1

1

It is an already communicated issue, several of us subscribed for, check here issue #321

for updates.

Robertino Vasilescu
  • 1,038
  • 1
  • 7
  • 13