How use MediaFilePicker and PhotoEditor plugins in Nativescript

Question

I am trying to use MediaFilePicker on nativescript and at the same time use the PhotoEditor plugin to crop/edit the photo taken from the camera but I don't make it work... here is part of my code:

let options: ImagePickerOptions = {
    android: {
        isCaptureMood: true, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 1,
        isNeedFolderList: true
    }, ios: {
        isCaptureMood: true, // if true then camera will open directly.
        maxNumberFiles: 1
    }
 };

 let mediafilepicker = new Mediafilepicker();
 mediafilepicker.openImagePicker(options);

 mediafilepicker.on("getFiles", function (res) {
 let results = res.object.get('results');
 let result = results[0];
 let source = new imageSourceModule.ImageSource();
 source.fromAsset(result.rawData).then((source) => {
     const photoEditor = new PhotoEditor();
     photoEditor.editPhoto({
         imageSource: source,
         hiddenControls: [],
     }).then((newImage) => {            
     }).catch((e) => {
         reject();
         });
     });
 });

The result object of the FilePicker comes like:

{
"type": "capturedImage",
"file": {},
"rawData": "[Circular]"
}

I believe if the picture was taken from the camera, then use the rawData field, but I dont know which format is coming and how to give it to PhotoEditor pluging to play with it.

Any suggestions?

Thanks!

Is it the photo editor never shows up? does it hit the catch block? Not sure why you have `reject();` again there, don't see any reference of a promise above. — Manoj, Feb 28 '19 at 21:41
I am using a Promise thats why. But the PhotoEditor never shows up. — relez, Feb 28 '19 at 22:12
Can you share a sample Git project where the issue can be reproduced? — Manoj, Mar 01 '19 at 10:58
Hi @Manoj, I have created an example so you can test: https://github.com/relez/ns-photo-ng.git. I hope it helps — relez, Mar 01 '19 at 15:12

score 0 · Accepted Answer · answered Mar 02 '19 at 00:01

The issue was at this line source.fromAsset(result.rawData) here, result.rawData is not an ImageAsset but it's PHAsset. You will have to create an ImageAsset from PHAsset and pass it on to fromAsset. So it would look like,

         import { ImageAsset } from "tns-core-modules/image-asset";

         ....
         ....
         imgSource.fromAsset(new ImageAsset(img)).then((source) => {
            const photoEditor = new PhotoEditor();
            console.log(source === imgSource);
            photoEditor.editPhoto({
                imageSource: source,
                hiddenControls: [],
            }).then((newImage: ImageSource) => {
                console.log('Get files...');
                // Here you can save newImage, send it to your backend or simply display it in your app

            }).catch((e) => {
                //reject();
            });
        });

How use MediaFilePicker and PhotoEditor plugins in Nativescript

1 Answers1