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

[Former Member]

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.

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

[former_member245490]

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

[Former Member]

Hi,

if you use XML to define your UI5-view you can do all the JS-related coding in the controller of your page.

For example:

sap.ui.controller("yourController", {

     onInit: function() {
          // request server to get token
          var response = this.getResponse("yourServerUrl", 'fetch');
          token = response.getResponseHeader('X-CSRF-Token');

          // define upload parameters and upload the file
          var fileUploader = this.getView().byId("fileUploader");
          fileUploader.upload();
     },

     // Ajax-GET-Request
     getResponse: function(serverUrl, token) {
          var oResp;
          $.ajax(encodeURI(serverUrl), {
               type: "GET",
               async: false,
               beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); //btoa = 64bit encrypt
                    xhr.setRequestHeader('Accept', 'application/json');
                    xhr.setRequestHeader('Content-Type', 'application/json');
                   xhr.setRequestHeader('X-CSRF-Token', token);
               }
          }).fail(function() {
               alert("GET-Request failed - "+serverUrl+" || "+token);
          }).complete(function(response) {
               oResp = response;
          });
          return oResp;
     }
}

I'm not sure if you can expose more data to a gateway using this method. Maybe you can achieve this by altering your upload-url.

Hope that helps somehow.

Regards,

Patrick Schmidt