Skip to Content
avatar image
Former Member

How to Upload multiple file using XML view in SAP back-end using Gateway

Hi Experts,

I've problem in uploading file from SAPUI5 app to sap back-end.

Please suggest me how to archive it.

Thanks and regards,

Rajesh Roy

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    avatar image
    Former Member
    Jan 13, 2015 at 05:06 AM

    Hi Rajesh,

    Please use the following code in XML View where you want to have upload file option.

       <VBox class="marginBoxContent" >
                <Label text="Upload Attachment File" />
                 <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>


    Please use the following code in the corresponding controller of the view.


    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;
       },


    Please make necessary modification in your code as per your need. You need to make necessary entity-set and gateway configuration as per where you want to upload the file.


    Regards,


    Subhabaha Pal

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Nataly Kokina

      Hi Nataly,

      It is better to use IE 10.0 and above to get all functionalities of SAPUI5. Few functionalities in UI5 like upload/download may not work properly in IE browser which is less than 10.

      Gone through your code. Seems you are using Javascript view in your development. Understood that the file value is giving back '0' in your case. You may try to use my code changing the XML view part to corresponding Javascript code. For Javascript code, you will get ample examples in net. You can try those. If you want to use XML view for file upload, you can try my method as currently no example available for XML view multiple type file upload in net. I have just given a cursory glance at your code. Will go through details soon as I get time. In the mean time, you can try to  convert my XML view part to JAVAScript code for your view. 

      Regards,

      Subhabaha Pal