Below is the approach that I tried and successfully able to upload.
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 : {
}
});