CODEWITHSUNDEEP
httpnativescript
Kyle Dagnan
Kyle Dagnan

Reputation: 11

Nativescript ImageSource HTTP Post

I am attempting to upload an image taken from the Nativescript Camera Plus plugin (type of ImageSource), and upload it to my API server using the Nativescript HTTP Form Data plugin. I have already tested my backend (Django) using Postman, and it works. I cannot figure out how to get from an ImageSource to the actual PNG/JPG file containing that image, in order to upload that alone (and not the ImageSource data).

I have tried using the ImageSource object itself, but that sends an empty file. I then tried following the HTTPFormData plugin's demo, and used the UIImageRepresentation and bitmap stuff (ios/Android) but it is still submitting an empty file.

let fd = new TNSHttpFormData();

    let params = [];

    let imageData: any;
        if(this.scannedID.image_data) {
            if(this.scannedID.image_data.ios) {
                console.log("iOS" + this.scannedID.image_data.width + " " + this.scannedID.image_data.height);
                imageData = this.scannedID.image_data.ios.UIImagePNGRepresentation;
            } else {
                let bitmapImage = this.scannedID.image_data.android.graphics.Bitmap;
                let stream = this.scannedID.image_data.android.java.io.ByteArrayOutputStream();
                bitmapImage.compress("PNG", 100, stream);
                let byteArray = stream.toByteArray();
                bitmapImage.recycle();

                imageData = byteArray;
            }
        }
        let param: TNSHttpFormDataParam = {
            data: imageData,
            contentType: 'image/png',
            fileName: 'idtest1.png',
            parameterName: 'image'
        };
        params.push(param);


    console.log("Parameters: " + JSON.stringify(param));
    console.log(params[0].data);
    try {
        const response: TNSHttpFormDataResponse = await fd.post(this.apiURL + 'VerificationID/', params, { headers: this.createRequestHeader(false) } );
        console.log(response);
        return response;
    } catch (e) {
        console.log(e);
        return e;
    }

It is printing out the width/height, so I know the image is there. I believe that my .ios.UIImagePNGRepresentation is not returning the PNG like I want. If I output the parameter that I create with the file, it outputs all of the object data except for the "data" (which should be the actual file data). I am unsure of where to go from here. Any help would be appreciated!

Upvotes: 0

Views: 604

Answers (1)

Manoj
Manoj

Reputation: 21908

I'm unsure how you get to this.scannedID.image_data.

But if you are using camera plus plugin, it is going to return an image-asset with appropriate width and height applied, using getImageAsync(callback) method on image asset should return you the UIImage (iOS) / Bitmap (Android).

It could be something like this in your photo captured event,

function onPhotoCaptured(args) {
  const asset = args.data;
  asset.getImageAsync((image, error) => {
        let imageData: any;
        if(image) {
            if(asset.ios) {
                imageData = UIImagePNGRepresentation(image);
            } else {
                let bitmapImage: android.graphics.Bitmap = image;
                let stream = new java.io.ByteArrayOutputStream();
                bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                let byteArray = stream.toByteArray();
                bitmapImage.recycle();

                imageData = byteArray;
            }
        }
  });
}

Upvotes: 1

Related Questions