File Upload problem in SAP HANA UI5

[Former Member]

Hello Expert,

I am trying to upload csv file data into HANA table. I created HANA XS project and created following Fileupload.view.js , Fileuploader.controller.js and BatchFileUpload.xsjs. Problem is that I'm getting 403 forbidden error when xsjs service executing.

Fileupload.view.js -

Fileuploder.controller.js

BatchFileUploader.xsjs

Error: 403 Forbidden error.

Please help me to get this resolve.

Thanks.

Shweta

[Former Member · Accepted solution]

Hi,

Seems like the xcsrf token is not set in the header.

Try something like this:

var header_xcsrf_token = sap.ui.getCore().getModel().getSecurityToken();

var oHeaders = {

                                "x-csrf-token" : header_xcsrf_token,

                                "slug" : file.name

                            };

                            jQuery

                                    .ajax({

                                        type : 'POST',

                                        url : "/sap/opu/odata/sap/ZC_CI_UPLOAD_SRV/thesises('"

                                                + sap.ui.getCore().byId(

                                                        'masterSelect')

                                                        .getSelectedKey()

                                                + "')/files",

                                        headers : oHeaders,

                                        ...

Kind regards,

RW

[Former Member · Accepted solution]

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

                                                }

                        });

[Former Member]

I am developing in SAP UI5 ut i am facing a problem in the Collection upload control.

I have not been able to push my image or document data into the database.It is showing the error of push property of undefined even if i have defined the variable.var file_Data = btoa(reader.result);
   var fileData = {
   "FILE_DATA"   :  file_data,
   "FILE_NAME"   :  file.name,
   "MIME_TYPE"   :  file.type,
   "SIZE"   :  file.size,
   "LAST_MODIFIED"   :  file.lastModifiedDate.toString().substring(0,15),
   "FILE_DESCRIPTION":  sap.ui.getCore().byId('idInputFileDescription').getValue()
   };
   if(sap.ui.getCore().getModel('idModel').getData()){
   var aDocuments = sap.ui.getCore().getModel('idModel').getData().documents;
   var file_data = btoa(reader.result);
   ****aDocuments.push(file_Data);****
  sap.ui.getCore().getModel('idModel').setData({documents : aDocuments},true);
  sap.ui.getCore().byId('idDocumentsList').rerender();

I am attaching the screenshot of the problem and code.

Please provide me solution of problem.

[vijay_kumar49]

Please go through below documents. 

1. Upload data
2. File upload using SAPUI5 Control