NativeScript how to save imagepicker selected file

Question

I am trying to select a picture from the user's gallery, view it in an ImageView and then save it for upload.

I am using the nativescript-imagepicker plugin.

Here is how i select the image from gallery and set it on the ImageView :

export function selectPicture() :void{
    let context = imagePicker.create({
        mode : "single"
    });
    context.authorize()
        .then(()=>{ return context.present();})
        .then((selection)=>{
            selection.forEach((selected)=>{
                selected.getImage().then((value :ImageSource)=>{
                    imageView.imageSource = value;
                })
            })
        });
}

An this is how I save it and upload it :

export function upload():void{

    try {
        let photoPath = FileNameService.generatePictureFilePath();
        let fileName = FileNameService.getFilenameFromPath(photoPath);
        //this is where I get the error
        **fromAsset(imageView.src)**.then(
            (res) => {
            imageSource = res;        
            let saved  = imageSource.saveToFile(...);
            if(saved){//doStuff },
        (error)=>{
            alert("Error " + error);
        })
    }catch (e){
        alert(e);
    }
}

the fromAsset function is throwing the following error :

asset.getImageAsync is not a function

What am I doing wrong?

Answer 1

When you get the selected item from the gallery you could use ImageSource saveToFile(<path>, <file_format>); method to save the image. Then you will be able the use the file path to upload the image to the needed backend service. You could review the below-attached example.

function startSelection(context) {
    context
        .authorize()
        .then(function() {
            imageItems.length = 0;
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected_item) {
                selected_item.getImage().then(function(imagesource){
                    let folder = fs.knownFolders.documents();
                    let path = fs.path.join(folder.path, "Test"+counter+".png");
                    let saved = imagesource.saveToFile(path, "png");

                    if(saved){
                        var task = sendImages("Image"+counter+".png", path);
                        var item = new observable.Observable();
                        item.set("thumb", imagesource);
                        item.set("uri", "Test"+counter+".png");
                        item.set("uploadTask", task);

                        imageItems.push(item);
                    }
                    counter++;
                })

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

For further help, you could also review the sample project here.