Below is the approach that I tried and successfully able to upload File to the Gateway Service.
Step1: Extend FileUploader (sap.ui.unified.FileUploader)
Overwrite the Upload method by AJAX call passing X-CSRF-Token
jQuery.sap.declare("com.ODataFileUploader.Component");
jQuery.sap.require("sap.ui.unified.FileUploader");
sap.ui.unified.FileUploader.extend("com.ODataFileUploader.Component", {
metadata : {
properties : {
"modelName" : "string",
"slug" : "string",
"csrf" : "string"
}
},
upload : function() {
var file = jQuery.sap.domById(this.getId() + "-fu").files[0];
try {
if (file) {
this._bUploading = true;
var that = this;
var _handleSuccess = function(data, textStatus, jqXHR){
that.fireUploadComplete({"response": "Success: File uploaded to entity" });
that._bUploading = false;
};
var _handleError = function(data){
var errorMsg = '';
if (data.responseText[1]){
errorMsg = /<message>(.*?)<\/message>/.exec(data.responseText)[1];
}else{
errorMsg = 'Something bad happened';
}
that.fireUploadComplete({"response": "Error: " + errorMsg});
that._bUploading = false;
};
var oHeaders = {
"x-csrf-token": this.mProperties.csrf,
"slug": this.mProperties.slug,
"X-Requested-With": "XMLHttpRequest",
"Content-Type": file.type,
"DataServiceVersion": "2.0",
"Accept" : "text/plain, */*"
};
jQuery.ajax({
type: 'POST',
url: this.getUploadUrl(),
headers: oHeaders,
cache: false,
contentType: file.type,
dataType: "text",
processData: false,
data: file,
success: _handleSuccess,
error: _handleError
});
jQuery.sap.log.info("File uploading to " + this.getUploadUrl());
}
} catch(oException) {
jQuery.sap.log.error("File upload failed:\n" + oException.message);
}
},
renderer : {
}
});
Step2: Fetch X-CSRF-Token
var url1 = getUrl("/sap/opu/odata/sap/ZGW_FILES_APP_SRV");
var csrfToken = "";
var aData = jQuery.ajax({
url : url1,
headers: { "X-CSRF-Token":"Fetch" ,
"X-Requested-With": "XMLHttpRequest",
"DataServiceVersion": "2.0" },
type: "GET",
contentType : "application/json",
dataType : 'json',
success : function(data, textStatus, jqXHR) {
csrfToken = jqXHR.getResponseHeader('x-csrf-token');
oFileUploader1.setCsrf(csrfToken);
oFileUploader1.setSlug("200000664_MOB15");
oFileUploader1.setUploadUrl(getUrl("/sap/opu/odata/sap/ZGW_FILES_APP_SRV/FileSet"));
oFileUploader1.upload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
});
Step3: Call File Upload Service by passing already Fetched X-CSRF-Token along with any inputs in the HTTP Headers
Step4: Upload the Actual file on Screen
From Desktop:
From Mobile:
Step5: Trigger Upload Action
var btnSubmit = new sap.m.Button({
text:'Trigger Upload',
press:function() {
var url1 = getUrl("/sap/opu/odata/sap/ZGW_FILES_APP_SRV");
var csrfToken = "";
var aData = jQuery.ajax({
url : url1,
headers: { "X-CSRF-Token":"Fetch" ,
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "image/jpeg",
"DataServiceVersion": "2.0" },
type: "GET",
//jsonpCallback : 'getJSON',
contentType : "application/json",
dataType : 'json',
//data : "",
success : function(data, textStatus, jqXHR) {
csrfToken = jqXHR.getResponseHeader('x-csrf-token');
oFileUploader1.setCsrf(csrfToken);
oFileUploader1.setSlug("2000006");
oFileUploader1.setUploadUrl(getUrl("/sap/opu/odata/sap/ZGW_FILES_APP_SRV/FileSet"));
oFileUploader1.upload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
});
- SAP Managed Tags:
16 Comments
