Using sap.ui.unified.FileUploader to upload file from XML view using oData Gateway service

Hi experts,

I am developing an UI5 application for approving purchase requisitions.

The aplication acts something like R/3 transaction ME52n using which the users (PR approvers) will be able to modify, update cost centre, G/L account, quantity and rate and also upload new attachments relevant for the purchase requisitions. All diplay facilities like apprver list, comments, attachments available in ME52n have already been developed by me in the application.

Now, I am facing problem in facilitating upload file functionality in my application.

I have already developed the back-end RFC and configured Gateway.

My import parameters in the gateway are as follows -

Banfn

Filename

Filetype

Attachment (XString format)

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

window.location.origin

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

Now I am trying to create the XML page and the button for upload.

For that I have written the code as follows -

<IconTabFilter

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

<VBox class="marginBoxContent" >

<Label text="Upload Attachment File" />

<u:FileUploader

id="fileUploader"

name="myFileUpload"

width="400px"

uploadComplete="handleUploadComplete"/>

<Button

text="Upload File"

press="handleUploadPress"/>

</VBox>

</IconTabFilter>

Now I am confused with what code to write in the event handleUploadPress as I have not found any example yet which is relevant for my scenario where the data is sent to Gateway from XML page and sending oData to gateway.

I have found an example in the following post but in this case the data is being sent from JavaScript page (where headerParameter is written in the same JS View page only). I am not getting any clue in case of XML page what to write in the XML View FileUploader code and the handleUploadPress event code.

Upload Image to SAP Gateway and Display Image in UI5 - Using New Fileuploader with SAP Gateway

I have received an example in the SAP Explored but there no Gateway service is involved.

SAPUI5 Explored

I am using following type of code in case of my general data upload-related cases where file upload is not involved (which is working fine) first getting the X-CSRF-Token value through a GET Statement and then putting a POST statement posting the value -

handleUpdate : function (evt) {

var oView = this.getView();

if (!window.location.origin) {

window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');

}

var Service3 = window.location.origin

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

// show confirmation dialog

var bundle = this.getView().getModel("i18n").getResourceBundle();

sap.m.MessageBox.confirm(

bundle.getText("UpdateDialogMsg"),

function (oAction) {

if (sap.m.MessageBox.Action.OK === oAction) {

var var_bnfpo = oView.byId("Objecth1").getBindingContext().getProperty("Bnfpo");

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

var var_pckgno = oView.byId("Objecth1").getBindingContext().getProperty("PckgNo");

var var_introw = oView.byId("Objecth1").getBindingContext().getProperty("Introw");

var var_menge = oView.byId("Vmenge").getValue();

var var_preis = oView.byId("Vpreis").getValue();

var var_kostl = oView.byId("Vkostl").getValue();

var var_sakto = oView.byId("Vsakto").getValue();

var var_mengeo = oView.byId("Objecth1").getBindingContext().getProperty("Quantity");

var var_preiso = oView.byId("Objecth1").getBindingContext().getProperty("Preis2");

OData.request

({

requestUri: Service3,

method: "GET",

headers:

{

"X-Requested-With": "XMLHttpRequest",

"Content-Type": "application/atom+xml",

"DataServiceVersion": "2.0",

"X-CSRF-Token":"Fetch" }

},

function (data, response)

{

header_xcsrf_token = response.headers['x-csrf-token'];

OData.request

({

requestUri: Service3,

method: "POST",

headers: { "X-Requested-With": "XMLHttpRequest",

"Content-Type": "application/atom+xml",

"DataServiceVersion": "2.0",

"Accept": "application/atom+xml,application/atomsvc+xml,application/xml",

"X-CSRF-Token": header_xcsrf_token },

data:

{

Banfn: var_banfn,

Bnfpo: var_bnfpo,

PckgNo: var_pckgno,

Introw: var_introw,

Menge: var_menge,

Preis1: var_preis,

Kostl: var_kostl,

Sakto: var_sakto,

}

},

function (data, response)

{

document.location.reload(true);

$("<div>Returned data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv"));

},

function (err)

{

document.location.reload(true);

$("<div>Returned error " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv"));

}

);

}

);

// notify user

var successMsg = bundle.getText("UpdateDialogSuccessMsg");

sap.m.MessageToast.show(successMsg);

// TODO call proper service method and update model (not part of this session)

}

},

bundle.getText("UpdateDialogTitle")

);

},

I want to post my upload file in a similar way like this as I am doing for my general data set. have created my Entity set and the RFCs that way only. But till now I could not make out the suitable code for that.

I have encountered following hurdles before me -

1. In JS view, the author of the blog mentioned above used the following code -

1. var oFileUploader = new sap.ui.unified.FileUploader({
2. uploadUrl : "your_service/UserSet('"+ user[0].getValue() +"')/Photo",
3. name: "simpleUploader",
4. uploadOnChange: false,
5. sendXHR: true,
6. useMultipart: false,
7. headerParameters: [
8. new sap.ui.unified.FileUploaderParameter({name: "x-csrf-token", value: sap.ui.getCore().getModel().getHeaders()['x-csrf-token'] }),
9. ],
10. uploadComplete: function (oEvent) {
11. var sResponse = oEvent.getParameter("response");
12. if (sResponse) {
13. oUploadDialog.close();
14. sap.ui.commons.MessageBox.show("Return Code: " + sResponse, "Response", "Response");
15. }
16. }
17. });
18. // create a button to trigger the upload
19. var oTriggerButton = new sap.ui.commons.Button({
20. text:'Upload',
21. press:function() {
22. // call the upload method
23. oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({name: "slug", value: oFileUploader.getValue() }));
24. oFileUploader.upload();
25. }
26. });

Now, how shall I write the headerParameters in XML view as has been written in the JS View.

2. If I write service url in XML view as I write in JS view controller, it should not work as I am dynamcally taking server and port value in controller as you can see in my earlier code which I am using in general data update case (not file upload).

3. In the example shown, the author is getting the X-CSRF-Token token value from the same entityset through GET statement whereas in my case I shall be using another entityset to get X-CSRF-Token and then POST it in this entityset. It is possible for me if I use the code I am currently using for general data upload.

4. I have to pass 3 more values - PR number, Filename and Filetype in the same entityset as mentioned in the import parameters.

How can I achieve this? your kind help will be highly appreciated. I am looking for what code to write in the XML view under FileUploader control as well as in the event handleUploadPress.

Regards,

Subhabaha Pal