File Upload and Send it Through AJAX to node.js Server in SAPUI5 Application

Hi team,

Today,In this post I will be explaining you how to upload any types of file in SAPui5 application.
Actually you will find many techniques over a web for file upload in sapui5.But those techniques will be related to directly passing the media server or gateway server which can store(upload) the file content and also have downlloadable feature.


What if you dont have any server and you are also not going to deploy the sapui5 application to fiori sandbox or sap abap sever.In that case you cant buy server just for media upload.

So Only way possible is convert the file in base64 format and send it like normal string to server over ajax and store in database or in text file in server and also again use that base64  format to get the actual data back in the actual format.


Here i will explain it for sapui5 application and will send to node.js server but it can be used for any Javascript framework just you need to have your uploaded which accepts file from our devices which sapui5 provides by default.


1)First add the File uploader to accept the file from Device:-

    ///view1.view.js

      var uploader=new sap.ui.unified.FileUploader({
id:"fileUploader",
name:"myFileUpload",
//uploadUrl:"https://localhost:3000/upload_photos",
tooltip:"Upload your file to the local server",
uploadComplete:sap.demo.common1.handleUploadComplete
});

var uploadButton=new sap.m.Button({
text:"Upload File",
press:sap.demo.common1.handleUploadPress
});


2) Now Define the functions mentioned in the view file:-

////view1.controller.js

   handleUploadPress:function(oEvent)
{
console.log("Upload Started");
var oFileUploader = sap.ui.getCore().byId("fileUploader");
var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];
var fileSizeInMB=file.size/1000000;
console.log(fileSizeInMB);

if(fileSizeInMB<2)
{
oFileUploader.upload();
}
else
{
sap.m.MessageBox.error("FileSize should not be more than 2 MB");
}

},

the above function gets called when upload button gets pressed.
here also you can set limit on the size of file user picks up.for that you have to fetch the file size and divide it by 1000000.

like        var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];
var fileSizeInMB=file.size/1000000;
              now compare it with if condition.


after that when oFileUploader.upload(); gets called,it uploads the file and when upload task gest complete, handleUploadComplete method gets called.


////view1.controller.js
handleUploadComplete:function(oEvent)
{

var oFileUploader = sap.ui.getCore().byId("fileUploader");
var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];
var BASE64_MARKER = 'data:' + file.type + ';base64,';
var filename = file.name;
//jQuery.noConflict();    
oView.byId("Obj001").getBindingContext().getProperty("Banfn");
var reader = new FileReader();
reader.onload = (function(theFile) {

return function(evt) {

var base64Index = evt.target.result.indexOf(BASE64_MARKER)+ BASE64_MARKER.length;
var base64 = evt.target.result.substring(base64Index);
var customer_code=sap.ui.getCore().byId("incidentCustomerId").getText();
var incident_number=sap.ui.getCore().byId("reportUpdateIncidentHeader").getTitle();
var oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local);
var userId;

   if (oStorage.get("myLocalData")) 
    {
         var oData = oStorage.get("myLocalData");
         userId=oData.Collection[0].userId;
    }

var imgdata = {

  // "Banfn" : var_banfn,

   "Filename" : filename,

 "Filetype" : BASE64_MARKER,

 "Attachment" : base64,

 };

$.ajax({

url: server_url,
type: "POST",
dataType: "json",
data: imgdata,
//processData: false,
//contentType: false,
success: function(data) {
console.log(data);
if(data.flag=="success")
{
sap.m.MessageBox.success("File has been uploaded Successfully");

}
},
error:function(){}
});
};
})(file);
reader.readAsDataURL(file);
return;



},

Here two things are most important :-

 1)BASE64_MARKER :- its the marker which contains data type of file uploaded and will be used when you want to display your file again using base64 code
  for ex:- "data:image/jpeg;base64," for image file of type jpeg

2)base64:- its the base64 code generated from file uploaded and will be used at time of decoding


now make the imgdata  as explained above and send it through ajax like normal data strings.
Store BASE64_MARKER and base64 together in database so at time of decoding it will be easily for you to fetch.


so now you would be interested in how to decode this base64 code for getting your old file back

so here is the way:-

fetch the base64 back from database with its base64_marker 

$.ajax({
        url: server_url,
          type: 'POST',
          dataType: "json",
          data:data,
            success: function(data) {
            console.log(data);
var base64=data.base64;
var BASE64_MARKER=data.base64_marker;
                       ///For Other Applications(Non SAPUI5)
                           window.open(BASE64_MARKER+base64);

                     ////For SAPUI5 Application
                           var x=new sap.m.Image({
src:BASE64_MARKER+base64
});
                           vertical_box.addItem(x);//Display the Image

                   }});


If ajax gives any problem then you can use Jquery.ajax() and you can write Jquery.conflict(); before ajax calling.

Above thing displays image in all browser without any problem
Other format file like pdf will be shown best in safari   but if other browser  may give you problem.
In that case use the pdf viewer supporting browser and gives base64+base64_marker  as combined string to input.It will surely display the original content.


At server side:-

//node.js
app.post('/abc',function(req,res){
res.header("Access-Control-Allow-Origin","*");
console.log(req.body);///content
});


Give the comment if you have any doubt.I will surely reply as early as possible.