File upload using SAPUI5 Control

[former_member197822]

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) {

                              }

                            });

            }

              });