Solved: Attachment Upload in SAPUI5 application through Ga...

Hi,

I am developing an UI5 application for approval of purchase requisitions.

I have already created the provision for viewing the uploaded attachments for a PR uploaded through ME52N.

Now, I have to create the provision of uploading the attachment for a PR as available in ME52N.

For this, I have already created an RFC in SAP R/3 which will accept the filename and the XSTRING of the file and it will create the attachment. The RFC has been tested also and working fine.

Now I have to create the SAPUI5 control in my application for this (choosing a file) and correspondingly converting the file to XSTRING and sending the filename and the XSTRING to the Gateway which will call the RFC.

Can anybody guide me how to make the provision of uploading the file (through uploader) and sending the file content in XSTRING format to the Gateway?

Any help will be highly appreciated.

Regards,

Subhabaha Pal

SAP Managed Tags:
SAPUI5

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Accepted Solutions (1)

Thanks a lot Robbe.

I have done some development and it is working. I shall go through your code also.

Thanks Robbe once again for your kind help.

Regards,

Subhabaha Pal

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Subhabaha,

were you using sap.ca.ui.FileUploader control? If yes can you please write the peice of code which worked for you. Also, can you let me know if the control works in IE9?

Many thanks,

Jasbir

Hi Subhabaha,

I am developing SAP Plant Maintenance Notification app in SAPUI5 XML view and I have requirement to upload attachments in SAP ECC with SAP Gateway.

Can you please suggest your approach to upload attachments.

Should I follow these blogs

http://scn.sap.com/community/gateway/blog/2014/07/25/uploading-files-to-sap-gw-downloading-files-fro...

http://scn.sap.com/community/developer-center/front-end/blog/2014/07/28/upload-image-to-sap-gateway-...

Any help would be greatly appreciated?

Regards,

Harry

Hi,

The method I have used is little different.

In the XML page, I have written the following code -

<IconTabFilter

icon="sap-icon://add-coursebook">

<u:FileUploader

id="fileUploader"

name="myFileUpload"

width="400px"

tooltip="Upload your file to the local server"

uploadComplete="handleUploadComplete"/>

<Button

text="Upload File"

press="handleUploadPress"/>

</VBox>

</IconTabFilter>

Now the code for event handleUploadPress is as follows -

handleUploadPress : function (evt) {

oDialog = new sap.ui.commons.Dialog();

var Service1 = window.location.origin

+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/EBANPRPROCESSSet";

var Service2 = window.location.origin

+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";

var oView = this.getView();

var oUploader = oView.byId("fileUploader");

var oFileUploader = this.getView().byId("fileUploader");

// var file = jQuery.sap.domById(oFileUploader + "-fu").files[0];

// var BASE64_MARKER = 'data:' + file.type + ';base64,';

oDialog = new sap.ui.commons.Dialog();

var file = jQuery.sap.domById(oUploader.getId() + "-fu").files[0];

var BASE64_MARKER = 'data:' + file.type + ';base64,';

;

// var oRequest = sap.ui.getCore().getModel(this.getModelName())._createRequest();

var filename = file.name;

var var_banfn = oView.byId("Obj001").getBindingContext().getProperty("Banfn");

var reader = new FileReader();

// On load set file contents to text view

reader.onload = (function(theFile) {

return function(evt) {

var base64Index = evt.target.result.indexOf(BASE64_MARKER)

+ BASE64_MARKER.length;

// oModel1 = sap.ui.getCore().getModel("CreateModel");

// oModel.oData.field = evt.target.result.substring(base64Index);

var base64 = evt.target.result.substring(base64Index);

// *****************************8

var imgdata1 = {

"Banfn" : var_banfn,

"Filename" : filename,

"Filetype" : BASE64_MARKER,

"Attachment" : base64

};

var service_url = Service2;

imgdata = JSON.stringify(imgdata1);

$.ajaxSetup({ cache: false });

jQuery.ajax({

url : Service1,

type : "GET",

async: false,

beforeSend : function(xhr) {

xhr.setRequestHeader("X-CSRF-Token", "Fetch");

// *****************End of CSRF Token

// Fetch******************************************//

success : function(data, textStatus, XMLHttpRequest) {

token = XMLHttpRequest.getResponseHeader('X-CSRF-Token');

}

});

$.ajaxSetup({

cache : false

});

jQuery.ajax({

url : service_url,

async : false,

dataType : 'json',

cache : false,

data : imgdata,

type : "POST",

beforeSend : function(xhr) {

xhr.setRequestHeader("X-CSRF-Token", token);

xhr.setRequestHeader("Content-Type", "application/json");

success : function(odata) {

oDialog.setTitle("File Uploaded");

oDialog.open();

document.location.reload(true);

error : function() {

oDialog.setTitle("File Uploaded");

oDialog.open();

document.location.reload(true);

}

});

};

})(file);

// Read in the file as text

reader.readAsDataURL(file);

return;

I think you will be able to make-out from the code. In the gateway front you have to make configuration accordingly. This code will work even in mobile devices. I am uploading purchase requisition attachments using this code.

Regards,

Subhabaha Pal

Hi Jasbir,

Sorry for little late reply.

Please find the piece of code below.

In the XML page, I have written the following code -

<IconTabFilter

icon="sap-icon://add-coursebook">

<u:FileUploader

id="fileUploader"

name="myFileUpload"

width="400px"

tooltip="Upload your file to the local server"

uploadComplete="handleUploadComplete"/>

<Button

text="Upload File"

press="handleUploadPress"/>

</VBox>

</IconTabFilter>

Now the code for event handleUploadPress is as follows -

handleUploadPress : function (evt) {

oDialog = new sap.ui.commons.Dialog();

var Service1 = window.location.origin

+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/EBANPRPROCESSSet";

var Service2 = window.location.origin

+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";

var oView = this.getView();

var oUploader = oView.byId("fileUploader");

var oFileUploader = this.getView().byId("fileUploader");

// var file = jQuery.sap.domById(oFileUploader + "-fu").files[0];

// var BASE64_MARKER = 'data:' + file.type + ';base64,';

oDialog = new sap.ui.commons.Dialog();

var file = jQuery.sap.domById(oUploader.getId() + "-fu").files[0];

var BASE64_MARKER = 'data:' + file.type + ';base64,';

;

// var oRequest = sap.ui.getCore().getModel(this.getModelName())._createRequest();

var filename = file.name;

var var_banfn = oView.byId("Obj001").getBindingContext().getProperty("Banfn");

var reader = new FileReader();

// On load set file contents to text view

reader.onload = (function(theFile) {

return function(evt) {

var base64Index = evt.target.result.indexOf(BASE64_MARKER)

+ BASE64_MARKER.length;

// oModel1 = sap.ui.getCore().getModel("CreateModel");

// oModel.oData.field = evt.target.result.substring(base64Index);

var base64 = evt.target.result.substring(base64Index);

// *****************************8

var imgdata1 = {

"Banfn" : var_banfn,

"Filename" : filename,

"Filetype" : BASE64_MARKER,

"Attachment" : base64

};

var service_url = Service2;

imgdata = JSON.stringify(imgdata1);

$.ajaxSetup({ cache: false });

jQuery.ajax({

url : Service1,

type : "GET",

async: false,

beforeSend : function(xhr) {

xhr.setRequestHeader("X-CSRF-Token", "Fetch");

// *****************End of CSRF Token

// Fetch******************************************//

success : function(data, textStatus, XMLHttpRequest) {

token = XMLHttpRequest.getResponseHeader('X-CSRF-Token');

}

});

$.ajaxSetup({

cache : false

});

jQuery.ajax({

url : service_url,

async : false,

dataType : 'json',

cache : false,

data : imgdata,

type : "POST",

beforeSend : function(xhr) {

xhr.setRequestHeader("X-CSRF-Token", token);

xhr.setRequestHeader("Content-Type", "application/json");

success : function(odata) {

oDialog.setTitle("File Uploaded");

oDialog.open();

document.location.reload(true);

error : function() {

oDialog.setTitle("File Uploaded");

oDialog.open();

document.location.reload(true);

}

});

};

})(file);

// Read in the file as text

reader.readAsDataURL(file);

return;

Regards,

Subhabaha Pal

Thanks Subhabaha.

I solved my issue with your logic. I am using only base64 conversion logic. I am passing file name and content(BASE64_MARKER) as an import parameter of create deep entity in SAP Gateway.

var oFileUploader = sap.ui.getCore().byId("fileUploader")

filename = oFileUploader.getValue();

if (!oFileUploader.getValue()) {

sap.m.MessageToast.show("Choose a file first");

return;

}

var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];

var BASE64_MARKER = 'data:' + file.type + ';base64,';

var reader = new FileReader();

reader.onload = (function(theFile) {

return function(evt) {

var base64Index = evt.target.result.indexOf(BASE64_MARKER) + BASE64_MARKER.length;

base64 = evt.target.result.substring(base64Index);

}

})(file);

reader.readAsDataURL(file);

Thanks again.

Regards,

Harry

Hi Shubhabaha,

I am getting error on the line :

var var_banfn = oView.byId("Obj001").getBindingContext().getProperty("Banfn");

Can you please let me know what is Obj001 element inside xml view ? Its missing in you XML code.

Thanks & Regards,

Mahesh Zeple.

Welcome Harry .... Happy to help ....

Hi,

From the line you have mentioned, 'Obj001' is the name of the Header element in the view detail view. 'Banfn' is a part of the header element. That I need to use for transferring file data and hence I have taken that in a variable.

You have to mention the view and then describe the element. The XML view code is mentioned below for the header.

<ObjectHeader

       id="Obj001"
       title="{BanfnTxt}"
       number="{Field3}"
       numberUnit="{Field2}" >
       <attributes>
         <ObjectAttribute text="{WerksTxt}" />
         <ObjectAttribute text="{ErnamTxt}" />
         <ObjectAttribute text="{AfnamTxt}" />
         <ObjectAttribute text="{PrDate}" />
         <ObjectAttribute text="{EkgrpTxt}" />
         <ObjectAttribute text="{BsartTxt}" />
       </attributes>
     </ObjectHeader>

I hope this clarifies your doubt. I have taken the 'Banfn' element from the object header.

Regards,

Subhabaha Pal

Hi Subhabaha,

You still didn't answer my question, does it work in IE9 and is the control sap.ca.ui.FileUpload?

Please do let me know.

Many thanks,

Jasbir

Hi,

Sorry if I missed anything. Yes as you can see my code it is unified controller mentioned through pointer <u:FileUploader (u - means unified). As I have used XML view, I needed to use unified controller only.

For best performance of UI5 applications, IE version 10 is necessary. Anything less than that may not work will with UI5 controls. I have not checked my application in IE9 as I had upgraded to IE10 before working in UI5.

Please let me know in case any help required.

Regards,

Subhabaha Pal

Hi Subhabaha,

thank you for your code, I actually got it working in my project as well.

Kind regards,

IJsbrand van Rijn

This message was moderated.

Welcome I. van Rijn ... happy to help ...

Answers (2)

Hi,

1.Can we upload any file(file format) using file uploader (or) is there any limitation with file formats.

2.Is there any size limit?

Thanks,

Magesh

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

1. yes

2. no

Please create a new topic fore this question, or use the search function...

Max File Size for OData Stream | SCN

var file = jQuery.sap.domById("__loader0-fu").files[0];

jQuery.ajax({

type: 'POST',

url: "/sap/opu/odata/sap/Z.../Files",

headers: oHeaders,

cache: false,

contentType: "application/json",

dataType: "json",

processData: false,

data: file,

success: function(

data) {},

error: function(){}

});

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thanks Robbe for your kind reply.

I am using FileUploader control in XML view is the member of the library SAP.UI.UNIFIED.

This I need to send to gateway service in XSTRING format.

I have made a post in regard to it with details.

I suppose the code you have mentioned can be used for the FileUploader control in JS view. That FileUploader is member of the library sap.ui.commons.

It will be of great help if you can kindly mention the code in my scenario.

Regards,

Subhabaha Pal

Well, did you have a look at this example?

SAPUI5 Explored

In the backend, the xstring is in the 'MediaResource' property.

Hi Robbe,

Thanks for your reply.

I have gone through that. There it is telling of updating in a server. However, in my case I have to send this to a gateway. I am searching for the correct code for that. My problem is as follows -

I am developing a SAPUI5 application for Purchase Requisition approval. The application is Fiori-like application.

Now there will be provision of uploading attachments for the PR, i.e. the approver will be able to upload any attachment necessary for the PR to approve.

I have already developed the back-end RFC and configured Gateway and following are the import parameters for the same -

Filename

Filetype

XString of the file (deep structure)

Now, in the detail XML page I have given the provision of uploading (not configured). The code of the above is as follows -

<IconTabFilter

icon="sap-icon://add-coursebook">

<u:FileUploader

id="fileUploader"

name="myFileUpload"

width="400px"

uploadComplete="handleUploadComplete"/>

<Button

text="Upload File"

press="handleUploadPress"/>

</VBox>

</IconTabFilter>

My Gateway service name and URL for uploading the file is as follows -

window.location.origin

+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";

My import parameters in the gateway are as follows -

Banfn

Filename

Filetype

Attachment

It will be of great help if you can suggest me of some code I may write in the event handleUploadPress in order to send the attachment to the said gateway in the XString format.

Regards,

Subhabaha Pal

Hello

Please check the below mentioned blogs and documents

http://scn.sap.com/community/gateway/blog/2014/07/25/uploading-files-to-sap-gw-downloading-files-fro...

http://scn.sap.com/community/developer-center/front-end/blog/2014/07/28/upload-image-to-sap-gateway-...

Thanks

Nabheet

Hi,

Sorry for this late reply. This is how I do it:

var file = jQuery.sap.domById("__loader0-fu").files[0];

var oHeaders = {

	"x-csrf-token": window.xcsrf,
	"slug": filename + "\|" + file.type + "whatever info you like to send",
	};

jQuery

.ajax({

type: 'POST',

url: "/url...",

headers: oHeaders,

cache: false,

contentType: "application/json",

dataType: "json",

processData: false,

data: file,

success: function(data) {

alert("uploaded");

error: function() {

alert("failed");

}

});

Ask a Question

Top Q&A Solution Author

User

Count

Attachment Upload in SAPUI5 application through Gateway

Accepted Solutions (1)

Accepted Solutions (1)

Answers (2)

Answers (2)

Re: I am using exit_saplkedrcopa_001 for enhanceme...

SAP build action - 403 error for POST API call wit...

Re: Table DDNTF is not active in the dictionary er...

Sorting not working on object Page Item table SAP ...

Re: How to configure SAP system in Eclipse ?