Using kony.net.HttpRequest & kony.net.FormData

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

Hi Kony Team,

I have mobile banking project using OCR, the case is user will capture image using camera widget then upload it using kony.net.HttpRequest and kony.net.FormData. The input must be file type because it was the template that the OCR API have. When i call the post request it didn't give the success response, but in postman or rested it give a successful response. I tried the following using kony js module below :

function dataread(){

var url = "https://api.datareader.online/v2/Ktp/upload";

var request = new kony.net.HttpRequest();

request.open(constants.HTTP_METHOD_POST, url);

request.setRequestHeader("Content-Type", "multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p");

var ktp = frmReg1Upload.imgKTP.src;

alert(ktp);

var form = new kony.net.FormData();

form.append("data ", ktp);

//form['Content-Type'] = "multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p";

request.send(form);

alert(request.response);

}

Is there any restriction in Kony , what would be the best way , is it custom Java connector way ?

Your quick reply will be highly helpful.

Thanks

2

Hi,

Please find the OCR sample app using ocr.space API.

You need to generate one API key.More info available at https://ocr.space/ocrapi

This API processes the base64 of the image.

Thanks,

3

Hi,

Try sending the rawBytes of the image instead of src.

var ktp = frmReg1Upload.imgKTP.rawBytes;

Thanks,

4

Hello,

As mentioned you can directly send the raw bytes or base 64 captured from the camera instead of src.

In the code snippet, I observed that you are showing alert for ktp. Please note that for android it will return a path such as content://media/external/images/media/88 instead of the rawBytes string which is expected. If you print the data that is getting transferred you can convert that to base64 and assign it to an image widget.

var ktp = frmReg1Upload.imgKTP.rawBytes;

alert(ktp);

var form = new kony.net.FormData();

form.append("data ", ktp);

Converting this to base64 directly from the client application.

var imgRawBytes= frmReg1Upload.imgKTP.rawBytes;

frmReg1Upload.imgKTP.base64= kony.convertToBase64( imgRawBytes);

var ktp =kony.convertToBase64(formProfile.cameraProfileImage.rawBytes);

form.append("data ", ktp);

Thank You,

5

Hi,

Please share the postman collection.

Thanks,

6

Hi Friends,

As i mentioned above i'm obliged to use file type, if it is base64 or rawBytes i could easily use mobile fabric to post them.

Anyway thank you for responding.

Postman collection attached.

7

Hi,

Thanks for sharing the postman collection.

Please find the code to resolve the issue

function dataread(){

var path =kony.io.FileSystem.getDataDirectoryPath();

myfile = kony.io.FileSystem.getFile(path+"/myfile.png");

//var imgData =Home.Image0d43b26d8154449.base64;

myfile.createFile();

var dataAdded = myfile.write(Home.cam123.rawBytes);

alert("IS DATA ADDED >>>>>>>"+dataAdded);

// f1.write(Home.cam123.rawBytes);

var request = new kony.net.HttpRequest();

request.onReadyStateChange=onReadyStateChange;

var url = "https://api.datareader.online/v2/Ktp/upload";

request.open(constants.HTTP_METHOD_POST, url);

request.setRequestHeader("Content-Type", "multipart/mixed; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");

var form = new kony.net.FormData();

form.append(myfile.name, myfile.read());

request.send(form);

}

Thanks,

8

Additionally,Please add this function to check the upload status :

function onReadyStateChange()

{

//kony.print("Entered ready state callback---");

alert(this.readyState+"---------------"+JSON.stringify(this.response));

if(this.readyState == constants.HTTP_READY_STATE_DONE )

{

alert(JSON.stringify(this.response));

}

}

Thanks,

9

Hi,

Please find the code to resolve the issue.

function camCapure()

{

var path =kony.io.FileSystem.getDataDirectoryPath();

myfile = kony.io.FileSystem.getFile(path+"/myfile123.jpg");

myfile.createFile();

var dataAdded = myfile.write(Home.cam123.rawBytes);

var request = new kony.net.HttpRequest();

request.onReadyStateChange=onReadyStateChange;

var url = "https://api.datareader.online/v2/Ktp/upload";

request.open(constants.HTTP_METHOD_POST, url);

request.setRequestHeader("Content-Type", "multipart/mixed; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");

var form1 = new kony.net.FormData();

form1.append(myfile.name, myfile.read());

request.send(form1);

}

  1. PLEASE MAKE SURE YOU ARE INVOKING THIS FUNCTION ON "onCapture" EVENT OF THE CAMERA WIDGET.
  2. PLEASE ENABLE "file upload" OPTION IN PROJECT SETTINGS FOR ANDROID.ATTACHED FILE FOR YOUR REFERENCE.**Image removed for security reasons**

Thanks,

10

Hi,

Please find the sample app for the solution posted.On Camera capture you can find the function getting executed.

Thanks,

11

Hi,

If the solution resolved your issue,please click [Select as Best] .

Thanks,

12

Hi,

Incase of image src(instead of camera rawbytes), Please use the below code snippet.

It requires to create image object reference with the image.src using “kony.image.createImage “

and generate rawBytes out of that Image Object using api “getImageAsRawBytes”

//Code snippet

var imgObjRef = kony.image.createImage(<<formid>>.<<imgid>>.src);

var rb = imgObjRef.getImageAsRawBytes(kony.image.ENCODE_PNG);

var frmData= new kony.net.FormData();

frmData.append("uploadFile.png",rb);

Thanks,