Skip to Content

uploading signature pad to odata

Hello,

I have implemented SAPUI5 signature pad and sending image(signature content) to SAP. My issue is passing signature pad image data to SAP using OData.request Post method.

I am stuck at below step 2. I will really appreciate if you can provide some guidance.

Step 1 - I am able to get signature pad image data(content) and attached is copy of content looks like.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACWCAYAAADwkd5lAAAdnklEQVR4Xu2dB6wVxffHhyY+FFBRs

Step 2 - Sending Image data to SAP using OData.request post method . In SAP

/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM class method I am only receiving IS_MEDIA_RESOURCE-mime_type I am not able to get

IS_MEDIA_RESOURCE-value. Below is my OData call logic.

var sgnurl = sap.ui.getCore().byId("SignatureImage").getSrc();

OData.request({
requestUri: "/sap/opu/odata/sap/ZZxxxxxxxxxx/xxxxxSet",
method: "POST",
headers: {
"X-Requested-With" : "XMLHttpRequest",
"Content-Type" : "application/atom+xml",
"Content-Type" : "image/png", //"image/jpeg",
"slug" : "image/png",
"DataServiceVersion" : "2.0",
"Accept" : "application/atom+xml,application/atomsvc+xml,application/xml",
"X-CSRF-Token": header_xcsrf_token,
},
Data: sgnurl
},
function(data, response) {
alert("OData call success");
},
function(err) {
alert("OData call Error");
});

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Dec 02, 2017 at 04:53 AM

    Hi Aman Anand,

    For any media uploading to OData, you have to give the $value URI.

    this._token = this._model.getSecurityToken();       //Get the model's CSRF security token 
                                                        //first (preferably in the init method of your controller)
    
    //For uploading the file, use the following code
    
    /**
    			 * To upload only the file (using AJAX).
    			 * @public
    			 */			
    			handleUploadComplete:function(evt){
    				var oFileUpload = sap.ui.getCore().byId("fileUploader");     //get the control instance
    				var f = evt.oSource.oFileUpload.files[0];                    //get the file
    				var entry = {};
    				entry.Photo = f;
    				
    				var url="proxy/http/xxx.XX.xx.XXX:xxXX/sap/opu/odata/sap/ZPRJ_SRV/userPhotoSet('"+this._id+"')/$value";
    		        //var oRequest = this.getView().getModel()._createRequest();
    		        var oHeaders = {
    		                  "x-csrf-token": this._token
    		        };
    		        		//Calling the AJAX function and sending the data, the content type, as well as the CSRF token.
    		        jQuery.ajax({
    		                  type: 'PUT',
    		                  url:url,
    		                  headers: oHeaders,
    		                  cache: false,
    		                  contentType: false,
    		                  processData: false,
    		                  data: f,
    		                  success:function(){alert("Inserted");},
    		                  error:function(err){console.log(err);}
    		        });
    
    
    			},
    
    
    

    In my case I get the instance of the file uploader in my controller, then I get the file to be uploaded, and I send the file to OData via the ajax method.

    Hope this helps,

    Regards.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Arjun,

      Thanks for your input. I can't use fileUpload as i don't have to get the media data from my desktop. I have to save the signature at runtime and send back the generated base-64 link to the backend.