Skip to Content
0

No file was sent to SAP Leonardo Image Feature Extraction API using FormData

Nov 12, 2017 at 04:50 AM

105

avatar image
Former Member

Hi experts,

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.

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

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

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

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);
	});
	
},
headers.jpg (221.6 kB)
params.jpg (389.0 kB)
response.jpg (85.4 kB)
zip-file.jpg (154.9 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Iftah Peretz
Jan 13 at 01:41 PM
0

Hi,

Before I start to implement your code on my end and debugging it, I noticed that you are passing a zip within a zip. Your download link has a zip file that inside of it there is not only the image but also other files, including another zipped image. This is not what I understand you are asking for, am I wrong? Is this what you are sending to the API? Is this what you meant to send to the API?

Share
10 |10000 characters needed characters left characters exceeded