0

I'm testing SAP Leonardo Image Feature Extraction API (https://sandbox.api.sap.com/ml/featureextraction/inference_sync). I have the base64 string of the image and I want to transform it to a file object and zip it, then to send the zipped image file to this API using XMLHttpRequest. But the response text is "Service requires a list of (zipped) images".

I attach my HTTP request header and parameters in below screenshots.

My HTTP request header

Although we see a messy code in parameters, the zipped file Download here is created successfully.

My HTTP request param

If you cannot download the zipped file, please refer to the screenshot below.

My zipped file

Everything seems to be fine. However, the response text is as below with status 400.

My HTTP response

My javascript code is shown below. What is wrong? It drives me crazy...

dataURItoBlob: function(dataURI, fileName) {
 //convert base64/URLEncoded data component to raw binary data held in a string
 var byteString;
 if (dataURI.split(',')[0].indexOf('base64') >= 0)
  byteString = atob(dataURI.split(',')[1]);
 else
  byteString = unescape(dataURI.split(',')[1]);
 
 //separate out the mime component
 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
 
 //write the bytes of the string to a typed array
 var ia = new Uint8Array(byteString.length);
 for (var i = 0; i < byteString.length; i++) {
  ia[i] = byteString.charCodeAt(i);
 }
 
 var blob = new Blob([ia], {encoding:"UTF-8",type:mimeString});
 //A Blob() is almost a File() - it's just missing the two properties below which we will add
 blob.lastModifiedDate = new Date();
 blob.name = fileName + '.' + mimeString.split('/')[1];
 
 return blob;
},

onSubmit: function(oEvent) {
 var oImage = this.getView().byId('myImage');
 //oImage.getSrc() : 'data:image/png;base64,iVBORw0KGgo...'
 var imageFile = this.dataURItoBlob(oImage.getSrc(), 'myImage');
 var zip = new JSZip();
 zip.file(imageFile.name, imageFile);
 
 zip.generateAsync({
  type:"blob",
  compression: 'DEFLATE', // force a compression for this file
  compressionOptions: {
   level: 6,
     },
 }).then(function(content) {
  //saveAs(content, "hello.zip");
  // start the busy indicator
  var oBusyIndicator = new sap.m.BusyDialog();
  oBusyIndicator.open();
  
  var formData = new FormData();
  formData.append('files', content, 'myImage.zip');
  
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  
  xhr.addEventListener("readystatechange", function () {
   if (this.readyState === this.DONE) {
    oBusyIndicator.close();
    //navigator.notification.alert(this.responseText);
    console.log(this.responseText);
   }
  });

  //setting request method
  //API endpoint for API sandbox
  //Destionation '/SANDBOX_API' in HCP is configured as 'https://sandbox.api.sap.com'
  var api = "/SANDBOX_API/ml/featureextraction/inference_sync";
  xhr.open("POST", api);

  //adding request headers
  xhr.setRequestHeader("Content-Type", "multipart/form-data");
  xhr.setRequestHeader("Accept", "application/json");
  //API Key for API Sandbox
  xhr.setRequestHeader("APIKey", "yQd5Oy785NkAIob6g1eNwctBg4m1LGQS");

  //sending request
  xhr.send(formData);
 });
 
},
Shelwin Wei
  • 1
  • 3
  • 1
    It's nice of you to give out your API key, are you sure you want to make it public? If it shouldn't be public, you should disable the api key, and request a new one for your use – Icepickle Nov 12 '17 at 06:42
  • Thanks for reminding that! I modify some characters of my APIKey with '...' – Shelwin Wei Nov 12 '17 at 06:50
  • That doesn't really matter, every one can still read it from your edit history, and even if you would delete your question and write a new one, you still have leaked your api key out on the net. Time to invalidate the key, and get yourself a new one if it could be business critical issues – Icepickle Nov 12 '17 at 06:52
  • That doesn't really matter. This APIKey is just for testing use. Thanks again! – Shelwin Wei Nov 12 '17 at 07:00
  • did you try to just use the base64 image and turn it into a file object? Those two seem relevant answers: https://stackoverflow.com/questions/16968945/convert-base64-png-data-to-javascript-file-objects https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata – Thomas Jungblut Nov 12 '17 at 10:11

1 Answers1

0

I fix this issue by myself. I put my solution just for others' information. It's very easy and only below code needs to be removed before sending request. I have no idea why. Please suggest if you know the reason. Thanks in advance!

xhr.setRequestHeader("Content-Type", "multipart/form-data");

Best Regards, Shelwin Wei

Shelwin Wei
  • 1
  • 3