Skip to Content

Using the SAPUI5 UploadCollection to upload/download ArchiveLink files via Gateway

First off, disclaimer: this blog post contains my views only and are not reflective of my employer or anyone else. Now that’s out of the way, we can begin!

I was asked to build a prototype UI5 application where the user can view and download existing attachments for an ISU business partner from ArchiveLink, as well as upload them. In the process of researching the prototype, I came across many helpful blogs, but I thought I’d also share my experience since I haven’t seen my particular scenario documented end to end.

The requirement to get and create attachments in ArchiveLink is not new, so I won’t really dwell on that. Instead I will be focusing on how it all hangs together, and the tweaking I had to do to deal with the ever so temperamental UploadCollection.

First things first. I had to build RFC function modules (I know, gross) because the system I had to work with is pre NW 7.31. Normally it would be a clean Gateway hub scenario (where the data retrieval would be written in the ECC Gateway service and consumed by the hub), but in my case I’m calling the function modules in ECC from the hub Gateway service. These function modules are pretty much just wrappers that are RFC enabled and call the standard ArchiveLink function modules, such as  ARCHIV_GET_CONNECTIONS,  ARCHIVOBJECT_GET_URI,  ARCHIVOBJECT_GET_TABLE, etc.

The next step was to build the Gateway service. This was pretty straightforward too, with just some tweaks to handle media types and streams. I basically had a Customer entity (unfortunately everything is in German but you’ll get the gist) which has an association with a CustomerFile entity. It’s via the CustomerFile entity that we can retrieve the value stream of the file, as well as perform the upload. In particular, note that for this to work, you need to set the entity that is handling the file content as a media type (see the checkbox below).

2016-03-29 09_24_11-SAP Gateway Service Builder.png

2016-03-29 09_55_36-SAP Gateway Service Builder.png

Other than that, the rest is as per any Gateway Service Builder project. After generating the classes and runtime objects, the next step was to redefine the methods required to handle the upload and download of content streams. I referred a lot this amazing blog by Peter Marcely, which also includes handy code snippets. You can find my code snippets below for the methods that I needed to redefine:

<Your model extension class>-DEFINE

METHOD define.

  super->define( ).

  DATA:

    lo_entity  TYPE REF TO /iwbep/if_mgw_odata_entity_typ,

    lo_property TYPE REF TO /iwbep/if_mgw_odata_property.

  lo_entity = model->get_entity_type( iv_entity_name = ‘KUNDEN_AKTE’ ).

  IF lo_entity IS BOUND.

    lo_property = lo_entity->get_property( iv_property_name = ‘Mimetype’ ).

    lo_property->set_as_content_type( ).

  ENDIF.

ENDMETHOD.

/IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM (note: I didn’t really need this for the UploadCollection as the URL is used to retrieve the document, but this was useful for testing. If you need to embed the content of the file, say in an image control then this would be useful).

METHOD /iwbep/if_mgw_appl_srv_runtime~get_stream.

  DATA: ls_key        TYPE /iwbep/s_mgw_name_value_pair,

        lv_gp_id      TYPE saeobjid,

        lv_doc_id    TYPE SAEARDOID,

        ls_lheader    TYPE ihttpnvp,

        ls_doc        TYPE zrcm_gw_file_info,

        lt_docs      TYPE TABLE OF zrcm_gw_file_info,

        ls_stream    TYPE ty_s_media_resource,

        lv_filename  TYPE string.

  CASE iv_entity_name.

    WHEN ‘KUNDEN_AKTE’.

      READ TABLE it_key_tab WITH KEY name = ‘GP_ID’ INTO ls_key.

      lv_gp_id = ls_keyvalue.


      clear: ls_key.

      READ TABLE it_key_tab WITH KEY name = ‘Arc_Doc_Id’ INTO ls_key.

      lv_doc_id = ls_keyvalue.

      CALL FUNCTION ‘ZRCM_GW_READ_DOCUMENTS’ DESTINATION <ECC_Destination>

        EXPORTING

          obj_id    = lv_gp_id

          sap_obj  = ‘BUS1006’

        IMPORTING

          dokumente = lt_docs.

      READ TABLE lt_docs INTO ls_doc WITH KEY object_id = lv_gp_id arc_doc_id = lv_doc_id.

      ls_streamvalue = ls_doccontent.

      ls_streammime_type = ls_docmimetype.

      lv_filename = ls_docarc_doc_id.

      lv_filename = escape( val = lv_filename

                            format = cl_abap_format=>e_url ).

      ls_lheadername = ‘Content-Disposition’.

      ls_lheadervalue = ‘|inline; Filename=”{ lv_filename }”|’.

      set_header( is_header = ls_lheader ).

      copy_data_to_ref( EXPORTING is_data = ls_stream

                        CHANGING  cr_data = er_stream ).

  ENDCASE.

ENDMETHOD.



/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM

METHOD /iwbep/if_mgw_appl_srv_runtime~create_stream.

  DATA: ls_key_tab    TYPE /iwbep/s_mgw_name_value_pair,

        lt_key_tab    TYPE /iwbep/t_mgw_name_value_pair,

        ls_doc        TYPE toadt,

        ls_return    TYPE bapireturn1,

        ls_kundenakte TYPE zcl_zrcm_verbindung_mpc=>ts_kunden_akte,

        lv_error      TYPE string,

        lv_filename  TYPE toaatfilename,

        lv_mimetype  TYPE w3conttype,

        lv_gp_id      TYPE char10.

  CASE iv_entity_name.

    WHEN ‘KUNDEN_AKTE’.

      READ TABLE it_key_tab WITH KEY name = ‘GP_ID’ INTO ls_key_tab.

      lv_gp_id = ls_key_tabvalue.

      lv_mimetype = is_media_resourcemime_type.

      REPLACE ALL OCCURRENCES OF ‘#’ IN lv_mimetype WITH space.

      lv_filename = iv_slug.

      REPLACE ALL OCCURRENCES OF ‘#’ IN lv_filename WITH space.

      CALL FUNCTION ‘ZRCM_GW_STORE_DOCUMENT’ DESTINATION <ECC_Destination>

        EXPORTING

          ar_object  = ‘/BME/V0043’

          object_id  = lv_gp_id

          sap_object = ‘BUS1006’

          doc_type  = lv_mimetype

          document  = is_media_resourcevalue

          filename  = lv_filename

        IMPORTING

          outdoc    = ls_doc

          return    = ls_return.

      IF ls_returntype = ‘E’.

        lv_error = ls_returnmessage.

        RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception

              EXPORTING

                textid            = /iwbep/cx_mgw_busi_exception=>business_error_unlimited

                message_unlimited = lv_error.

      ELSE.

        ls_kundenaktearc_doc_id = ls_docarc_doc_id.

        ls_kundenaktefilename = iv_slug.

        ls_kundenaktemimetype = is_media_resourcemime_type.

        ls_kundenaktegp_id = lv_gp_id.

        kunden_akteset_get_entity(

          EXPORTING

            iv_entity_name    = iv_entity_name

            iv_entity_set_name = iv_entity_set_name

            iv_source_name    = iv_source_name

            it_key_tab        = it_key_tab

            it_navigation_path = it_navigation_path

          IMPORTING

            er_entity          = ls_kundenakte ).

        copy_data_to_ref( EXPORTING is_data = ls_kundenakte

                          CHANGING  cr_data = er_entity ).

      ENDIF.

  ENDCASE.

ENDMETHOD.


KUNDEN_AKTESET_GET_ENTITY

METHOD kunden_akteset_get_entity.

  DATA: ls_key        TYPE /iwbep/s_mgw_name_value_pair,

        lv_arc_doc_id  TYPE string,

        lv_gp_id      TYPE saeobjid,

        lv_content    TYPE xstring,

        lv_bin_length TYPE sapblength,

        ls_doc        TYPE zrcm_gw_file_info,

        lt_docs      TYPE TABLE OF zrcm_gw_file_info.

  READ TABLE it_key_tab WITH KEY name = ‘GP_ID’ INTO ls_key.

  lv_gp_id = ls_keyvalue.

  CLEAR: ls_key.

  READ TABLE it_key_tab WITH KEY name = ‘Arc_Doc_Id’ INTO ls_key.

  lv_arc_doc_id = ls_keyvalue.

  CHECK lv_gp_id IS NOT INITIAL AND lv_arc_doc_id IS NOT INITIAL.

  CALL FUNCTION ‘ZRCM_GW_READ_DOCUMENTS’ DESTINATION <ECC_Destination>

    EXPORTING

      obj_id    = lv_gp_id

      sap_obj  = ‘BUS1006’

    IMPORTING

      dokumente = lt_docs.

  READ TABLE lt_docs INTO ls_doc WITH KEY arc_doc_id = lv_arc_doc_id.

  MOVE-CORRESPONDING ls_doc TO er_entity.

  er_entitygp_id = lv_gp_id.

ENDMETHOD.


This is the POST URL I used to upload some content for testing:


/sap/opu/odata/sap/ZRCM_VERBINDUNG_SRV/KUNDEN_AKTESet(‘0000208999’)/$value


So far, so good.


Next I created a simple UI5 application that allows the user to view the attachments that exist, while also having the ability to upload new ones. The control that made the most sense was UploadCollection, which seems to be relatively new (read: buggy). In principle this was the perfect control for the use case, however when I started using it I realized that it’s still in its developmental stages. I referred to the UploadCollection example in SAPUI5 Explored, but please note that uses hard coded JSON data.

First thing I realized is when I disabled instantUpload, I lost the ability to display the existing attachments in a list. The list becomes the waiting area only for the attachments you will be uploading. That was rather annoying, because sometimes you want to check the files before you decide to upload them, as well as being able to see what files already exist. Perhaps this will be improved in a later release, but for now I just had to leave instantUpload on.

Another thing I noticed: after the UploadCollection is instantiated, you can no longer set the upload URL dynamically. This means you either hardcode it in the view definition (yuck), or you set it once at initialization, which is what I ended up doing. I find it strange that we are given the setter method, but when you use it after instantiation, you get this error:

2016-03-29 10_16_49-Brunata Kunden Akten.png

Then there’s the CSRF Token. I get why we need to use these, but to have to set it manually in the code is just mind boggling. Essentially I had to retrieve the CSRF Token in an AJAX call, and store the token to be sent with the upload request. This seems to be the case also with the FileUpload control as there are loads of other posts describing the same workaround. It would be nice if this was all handled automatically in the standard control.

The final thing I had to tweak was the completed upload event handler. I expected to have access to the response from the upload request (similar to reading the model) in this event, since it is triggered after a successful upload. Think again. If you leave this method empty, the status of the upload stays at 99% forever. I didn’t really want to rebind the whole UploadCollection aggregation each time an upload is completed, since the list could load quite slowly and appear strange to the user (while a new file is uploading, it appears at the top of the list, but after rebinding it goes somewhere else). In the end I had to resort to rebinding because it was the cleanest way. I added a busy dialog with a delay so the user wouldn’t see the file hop from the top to somewhere else.


Below are some screenshots of the application in action:

2016-03-29 09_49_39-Brunata Kunden Akten.png

2016-03-29 09_51_08-Brunata Kunden Akten.png

2016-03-29 09_51_41-Brunata Kunden Akten.png

Here are the key events for UploadCollection:


onBeforeUploadStarts: function(oEvent) {
  // Stellen die Kopf Parameter slug
  var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
  name : "slug",
  value : oEvent.getParameter("fileName")
  });
  oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
  _busyDialog.open();
  },






onUploadComplete: function(oEvent) {
  var sUploadedFile = oEvent.getParameter("files")[0].fileName;
  var location = oEvent.getParameter("files")[0].headers.location;
  var index = location.indexOf("/KUNDEN_AKTESet");
  var path = location.substring(index);
  var oCollection = oEvent.getSource();
  var collectionPath = "/KUNDENSet('" + _gp_id + "')/AKTEN";
  var oTemplate = this.byId(_collectionItemId).clone();
  _collectionItemId = oTemplate.getId();
  oCollection.bindAggregation("items", {
  path: collectionPath,
  template: oTemplate
  });
  setTimeout(function(){
  _busyDialog.close();
  MessageToast.show(_oBundle.getText("dokumentHochgeladen"));
  }, 3000);
  },






onChange: function(oEvent) {
  // Stellen das CSRF Token wenn ein File hinzugefügt ist
  var oUploadCollection = oEvent.getSource();
  var oCustomerHeaderToken = new UploadCollectionParameter({
  name : "x-csrf-token",
  value :  _csrfToken
  });
  oUploadCollection.addHeaderParameter(oCustomerHeaderToken);
},





So there you have it. A few tweaks here and there but now it functions quite well. I hope to see future improvements in this control, as it is quite a handy one, and I’d personally like the methods that are not allowed to be removed (why tease me with something I can’t actually use).

I hope this post has helped shed some insight if you are looking into the same scenario.

31 Comments
You must be Logged on to comment or reply to a post.
      • Hi Joanna,

        please send the code for inside of this function module CALL FUNCTION ‘ZRCM_GW_READ_DOCUMENTS’ DESTINATION <ECC_Destination>..

        this code is very helpful to get files from the DMS system.

        Regards

        Shankar.

        • Hello Shankar,

          As mentioned in the start of the blog post, I used the standard ArchiveLink function modules to retrieve the data. You would have to work out yourself what parameters to supply, as it would vary based on what type of business object you’re dealing with.

          In short, the sequence I used was to call these function modules in the shown order:

          • ARCHIV_GET_CONNECTIONS
          • ARCHIVOBJECT_GET_URI (this is to get the URL to access the archived object)
          • ARCHIVOBJECT_GET_TABLE (this is used to get the content for each archive document found in the first step, since I have to populate the content in Gateway)

          If you use the wizard with these function modules you will see about the same thing that’s in my code.

          Hope this helps.

          Regards,

          Jo

  • Hello Joanna,

    I am creating a simple application to load files from UI5 to gatway.

    /wp-content/uploads/2016/09/1_1034712.png

    I redefined update_Stream and get_Stream. now i can upload/downlod files from gatwayclient.

    Then I created UI5 Application with UploadCollection.

    onChange(){

    setting the x-csrf-token

    }

    onBeforeUpload(){

    setting the file name

    }

    and uploadUrl i set like:

    <UploadCollection

      id=”UploadCollection”    

      maximumFilenameLength=”55″

      multiple=”true”

      uploadUrl=”proxy/http/<host>:<port>/sap/opu/odata/sap/ZZTEST_SRV/attchmentSet”

    ….

    </UploadCollection>

    Running the app on upload files: i am getting error

    responded with a status of 500 (Server Error)

    FileUploader.js:6 POST http://localhost:50868/Text/proxy/http/<host>:<port>/sap/opu/odata/sap/ZZTEST_SRV/attchmentSet 500 (Server Error)

    could you please guide me to correct the uploadUrl.

    Thanks and Best Regards,

    Abhi

    /
    /wp-content/uploads/2016/09/1_1034712.png
    • Hi Abhi,

      It looks like you are trying to test from a local host. Have you setup your proxy definition so you can access the Gateway system? It should be in web.xml.

      Also, normally a 500 error is an error on the server side, so you would either be able to find more information in the Gateway logs, or try and debug.

      Regards,

      Jo

      • Hello Jonna,

        Thanks a lot for your reply. I checked log and found that create_stream method should be implemented. After implementing the method now files are getting store in database.

        But in UI busy state is always on with message : Upload completed. Please wait for the server to finish. Could you please let me know how to stop the busy indicator.

        /wp-content/uploads/2016/09/11_1034948.png

        PS: When i tested through gateway client update_Stream is getting called because of PUT so i though it will work for uploadcollection too, but in case of Uploadcollection POST is getting triggered so we should have create_stream method.

        Thanks and Best Regards,

        Abhi

        /
        /wp-content/uploads/2016/09/11_1034948.png
    • Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

  • Hi Joanna,

    It is a very interesting blog. I am working on a similar PoC. I have to retrieve a document stored using archivelink. For this I am using SAPUI5 and oData. My oData service works fine. I am using
    ARCHIV_GET_CONNECTIONS and ARCHIV_GET_CONNECTIONS  functions to display the stored document.  Normally, if you run this FM with the correct parameters, the document opens up in the browser automatically.

    How do I handle this in the SAPUI5 frontend?

  •  

    Hi Joanna,

    As per this blog, we can use link

    sap/opu/odata/sap/ZRCM_VERBINDUNG_SRV/KUNDEN_AKTESet(‘0000208999’)/$value to upload the attachment in ECC.

    Can you please help me to know where exactly I have to put this link.

    I tried putting this URL in:

    • uploadURL in XML View
    • Using https://github.com/SAP/openui5/issues/786 blog, I extended the UploadCollection UI element and set the value of uploadURL via setUploadUrl method

    I tried both the approaches but my CREATE_STREAM method of DPC_EXT class is not getting called.

    You views on this will be really helpful.

    Regards,

    Harish

  • Hi  Former Member

    I have the same requirement as yours. I have trouble creating the document in the content repository. Can you pls tell me that the FM that you have used ‘ZRCM_GW_STORE_DOCUMENT’  is the copy of which standard FM??

    thanks in advance.

    regards,

    Shaddha.

  • Hi Joanna,

    Can you please let me know how to make synchronous or asynchronous from ui5 to ODATA for this uploadCollection functionality. i could not find in UI5 demokit.

    Thanks & Regards,

    Rakshith

  • Hi,

    could anybody show how to get the CSRF Token? I have tried different ways, but without success.

    Thanks & Regards

    Yu

  • Hi ,

    can anyone let me know about the upload collection ,what is the maximum file size that can be included in each of the files in case of multiple files.

    maxfileSize=”?” multiple=”true” and it is more than 10 files

    Please help me out in this.

    thanks,

    Akhil Jain

  • Hi,

    Coud you please show me (or send via email) your full XML view and JS controller? I need to do the same thing, but I just cant get the binding right.

    Thank you

    Tu

    • Hi,

       

      i could provide you with my recent stage of development regarding the upload collection control, without any warantees or guarantees 😉 So far, uploading a singel PDF works,  and also uploading multiple files work but i am still figuring out, how to cut the incoming stream into pieces such that i can identify the single files…

      It is tricky to set the right things in the right event handlers…

       

      So, regarding the UI part, i have in the View:

       

      <Page title="{i18n>title}">
      				<content>
      					<l:VerticalLayout>
      						<UploadCollection
      							id="fileUploader"
      							fileType="pdf"
      							mimeType="pdf"
      							instantUpload="false"
      							mode="MultiSelect"
      							multiple="true"
      							sameFilenameAllowed="false"
      							showSeparators="All"
      							terminationEnabled="true"
      							uploadEnabled="true"
      							uploadUrl="/sap/opu/odata/sap/ZODATA_PDF_UPLOAD_SRV/HeadSet(IdHead='0001')/Head2Documents"
      							typeMissmatch="onTypeMissmatch"
      							change="onValueChange"
      							beforeUploadStarts="onBeforeUploadStarts"
      							fileDeleted="onFileDeleted"
      							fileRenamed="onFileRenamed"
      							>
      						<items>
      						</items>
      					</UploadCollection>
      </content>
      </Page>

       

      Still, an issue persist that i am not able to provide the UploadUrl dynamically… so it is still under construction. But as a test, it is hard-coded.

       

      For the controller, it is really important where to add certain additional header-Parameters…to figure this out took me some days! 🙂

       

       

      as of today, this works for me.. it may change with a later version of SAPUI5, as for me, these are bugs, that setting those parameters doesn’t work as well in other events previous to the upload itself…

       

      Controller:

       

      	//Important: Set X-CSRF-Token here
      		onValueChange: function(oEvent) {
      			
      			
      			//var oFileUploader = this.byId("fileUploader");
      			var oFileUploader = oEvent.getSource();
      			
      			// console.log(oFileUploader);
      			// console.log(oEvent.getSource());
      			
      			//Prüfung, ob nicht bereits vorhanden
          		oFileUploader.removeAllHeaderParameters();
      			
      			
      			//Get x-csrf-token:
      			var oModel = this.getView().getModel();
      			
      			//console.log("oModel: ",oModel);
      			
      			//oder: oModel.refreshSecurityToken()
      			var oToken = oModel.getSecurityToken();
      			//console.log("oToken: ",oToken);
      			
      			//x-csrf-token:
          		oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
          		name: "x-csrf-token",
          		value: oToken	}));
      			
      			
      			// //URL
      			// //vorher Anpassungen in der neo-app.json notwendig, 
      			// //damit URL aufgelöst werden kann
      			
      			// var sUrlRoot = "/sap/opu/odata/sap/ZODATA_PDF_UPLOAD_SRV";
      			// var sUrl = sUrlRoot + "/HeadSet(IdHead='0001')/Head2Documents";
      			
      			// //console.log(sUrl);
      			
      				
      			//oFileUploader.setUploadUrl(sUrl);
      		
      			//var sUrl = sUrlRoot + "/DocumentsSet(Idhead='0001',Documentid='0001')/$value";
      			//var sUrl = sUrlRoot + "/HeadSet(IdHead='0001')/H2D/$value";
      			
      			
      			
      			
      			
      			
      				
      			// //manuelles auslesen des x-csrf-Tokens, im Falle wenn die Anwendung nicht an einem Modell hängt, 
      			// //ansonsten mittelns:  sap.ui.getCore().getModel().refreshSecurityToken(); innerhalb des onUploaddPress
      			// //siehe onUploadPress2
      			
      			// //zunächst, den bestehenden Parameter löschen
      			
      			// var _csrfToken = "";
      			// jQuery.ajax({
         // 		url: sUrlRoot,
         // 		headers: {
         //     	"X-CSRF-Token": "Fetch",
         //     	"X-Requested-With": "XMLHttpRequest",
         //     	"DataServiceVersion": "2.0"
         // 		},
         // 		type: "GET",
         // 		contentType: "application/json",
         // 		dataType: 'json',
          		
         // 		success: function(data, textStatus, jqXHR) {
         //     	_csrfToken = jqXHR.getResponseHeader('x-csrf-token');
              	
         //     	console.log(_csrfToken);
          		
          		
         // 		//Reichere Header Parameter an:
          		
         // 		//Prüfung, ob nicht bereits vorhanden
         // 		oFileUploader.removeAllHeaderParameters();
          		
          		
         // 		// //x-csrf-token:
         // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
         // 		// name: "x-csrf-token",
         // 		// value: _csrfToken	}));
          		
          		
         // 		// //hinzufügen von Parameter sendXHR
         // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
          			
         // 		// 	name: "sendXHR",
         // 		// 	value: "true"
          			
         // 		// }));
          		
         // 		// //useMultipart="false"
         // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
         // 		// name: "useMultipart",
         // 		// value: "true"	}));
          			
          	
              			
              			
              
              			
         //     	console.log(oFileUploader.getItems());		
              			
         //     	console.log(oFileUploader);	
              	
         //     	console.log(oFileUploader.getHeaderParameters());
              	
              	
         ////     	oFileUploader.setUploadUrl(sUrl);
      			// // oFileUploader.upload();
              	
         // 		}});	
      				
      			console.log(oFileUploader);	
      				
      			
      		},

       

      all the other, commented parts did not work at this point/event!! So most of the time I wasted to figure this out. Therefore, it is still in the code 😉

       

      //Important: Set Slug here
      		onBeforeUploadStarts: function(oEvent) {
      			
      			//var oFileUploader = this.byId("fileUploader");
      			var oFileUploader = oEvent.getSource();
      			
      			//Slug:
      			
      			//hole Dateinamen der einzelnen Anhängen
          		
          		var oItems = oFileUploader.getItems();
          		var sSlug = "";
          		var sSep = ", "; //separation
          		
          		// oItems.forEach(function(i){
          			
          		// });
          		
          		console.log(oItems);
          		console.log(oItems.length);
          		
          		for( var i = 0; i< oItems.length; i++ ) {
          		
          			//console.log(oItems[i].getFileName());
          			sSlug +=  oItems[i].getFileName() + sSep;
          			
          		}
          		
          		console.log(sSlug);
          		
          		//Füge Slug-Parameter hinzu, um weitere Informatinen (Filename) anzureichern
          	
          		var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
              			name: "slug", value: sSlug });
              	
              	//add it like this: Important, otherwise it won't work!!		
          		oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
          		
          		//Won't work like this!!
              	// oFileUploader.addHeaderParameter(
              	// 	new sap.m.UploadCollectionParameter({
              	// 		name: "slug", value: sSlug }));
      			
      			console.log(oFileUploader);
      			
      		},

       

      At this point i just want to pay credit to all those people that wrote a number of blogs on the fileUploader and the UploadCollection on different Forums.. !

       

      Hope it could help!

       

      Cheers,

      Aleks

      /
      😉
  • Hello to all,

    I implemented the UploadCollection and so far, i am able to sent files to the backend (SEGW/SE80 OData-Service)

    does anybody of you know how to distinguish the incoming files later in the backend? I have access to the content (is_media_resource-value), but how can i “cut” the content into the distinct files i sent originaly? Shall I use a function module for this? Some Xstring_to… ?

     

    Thank you in advance!

     

    Best regards,

     

    Aleks

    • I have found a solution, thanks to the original author of the post and focusing while reading 😉

      URL: It can be set in the onInit-Method

      Several files:

      In Principle, for each file an own/distinct HTTP-Post is fired. Each File will be represented internally as an aggregation items -> UploadCollectionItem, and those have a property (check the api) called fileName, that you can use to set the slug in onBeforeUploadStarts, that is called for each item/file. So the filename can will be transmitted in the slug for each file seperately. Still to go for grouping those calls, as I may run into some lock-issues for real-world scenario.  I will update my previous contribution to show the “final” coding.

       

      Cheers,

      Aleks

        • Hola Sergio,

           

          thanks, i will start with it during the week. I went to the Hackaton/Connect2019 in Berlin..it was tough and time- & ressources-consuming, but very very cool! Unfortunately, i couldn’t do the blog during that time.

           

          Your welcome!

  • HI All,

    I did the same as given  by “Aleksandar Mijailovic“, i can able to upload but not able to download or actuallly i wanted to display in the next tab the uploaded file .

    Attached screenshot.

    Could you please help on this what wrong i did .

     

    View code : <UploadCollection
    maximumFilenameLength="55"
    maximumFileSize="1000"
    fileDeleted="onFileDeleted"
    filenameLengthExceed="onFilenameLengthExceed"
    fileRenamed="onFileRenamed"
    fileSizeExceed="onFileSizeExceed"
    id="myIdUploadCollection"
    fileType="PDF"
    change="onChange"
    instantUpload="false"
    mode="SingleSelectMaster"
    sameFilenameAllowed="false"
    beforeUploadStarts="onBeforeUploadStarts"
    items="{path: '/entitySet'}"
    multiple="true"
    uploadUrl="/sap/opu/odata/SRV/AttachmentsSet"
    uploadComplete="onUploadComplete"
    noDataText="No files found."
    noDataDescription="Drop files to upload, or use the &quot;+&quot; button.">
    <items>
    <UploadCollectionItem
    documentId="{ID}"
    fileName="{FileName}"
    url="{index}"
    mimeType="{MIMEType}"
    enableEdit="false"
    enableDelete="false"
    visibleDelete="false"
    visibleEdit="false">
    </UploadCollectionItem>
    
    Controller code : same as above ( "Aleksandar Mijailovic" ).
    
    Note : the attachment is clickable but nothing is happening after click . 

     

    /
  • Hi guys,

     

    sorry for the late reply. I will try to upload my complete code. It is some time ago, since I worked on this, so no guarantee.

     

    For  displaying previously uploaded files, you need to construct the URL such that for each file, upon click, a $value call is fired. So, you first need to get all files that are there in the backend, by firing a get_entity-call. This will give you the filename, but more importantly, the key-fields (like Id Head and DocumentId in my case). When having the key-fields, the URL can be constructed using a formatter function. Then this URL will be called upon click on the Item of the UploadCollection. This is roughly the approach I was using back in the days. CAUTION/Disclaimer: This was SAPUI5-Version 1.54 or so. Maybe it changed for newer Versions, so no guarantee/responsibility, neither I am claiming that this is best practise and completely working etc.

     

     

     

    Data model looks like this:

     

     

    
    
    class ZCL_ZODATA_PDF_UPLOAD_DPC_EXT definition
    
    public
    
    inheriting from ZCL_ZODATA_PDF_UPLOAD_DPC
    
    create public .
    
    
    
    
    public section.
    
    
    
    
    methods /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM
    
    redefinition .
    
    methods /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM
    
    redefinition .
    
    protected section.
    
    
    
    
    methods DOCUMENTSSET_GET_ENTITY
    
    redefinition .
    
    methods DOCUMENTSSET_UPDATE_ENTITY
    
    redefinition .
    
    methods HEADSET_GET_ENTITY
    
    redefinition .
    
    methods HEADSET_GET_ENTITYSET
    
    redefinition .
    
    methods DOCUMENTSSET_GET_ENTITYSET
    
    redefinition .
    
    private section.
    
    ENDCLASS.
    
    
    
    
    
    
    
    
    
    
    CLASS ZCL_ZODATA_PDF_UPLOAD_DPC_EXT IMPLEMENTATION.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Public Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING(optional)
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING(optional)
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING(optional)
    
    * | [—>] IS_MEDIA_RESOURCE              TYPE        TY_S_MEDIA_RESOURCE
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR(optional)
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH(optional)
    
    * | [—>] IV_SLUG                        TYPE        STRING
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY_C(optional)
    
    * | [<—] ER_ENTITY                      TYPE REF TO DATA
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    METHOD /iwbep/if_mgw_appl_srv_runtime~create_stream.
    
    **TRY.
    
    *CALL METHOD SUPER->/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM
    
    *  EXPORTING
    
    **    iv_entity_name          =
    
    **    iv_entity_set_name      =
    
    **    iv_source_name          =
    
    *    IS_MEDIA_RESOURCE       =
    
    **    it_key_tab              =
    
    **    it_navigation_path      =
    
    *    IV_SLUG                 =
    
    **    io_tech_request_context =
    
    **  IMPORTING
    
    **    er_entity               =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    
    
    
    DATA: ls_key_tab   TYPE /iwbep/s_mgw_name_value_pair,
    
    lt_key_tab   TYPE /iwbep/t_mgw_name_value_pair,
    
    ls_documents TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_documents,
    
    lv_documentid type zcl_zodata_pdf_upload_mpc_ext=>ts_documents-documentid,
    
    lv_idhead    TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_head-id_head,
    
    lv_filename type string,
    
    lv_categoryid type zcl_zodata_pdf_upload_mpc_ext=>ts_documents-categoryid,
    
    ls_docs      TYPE ztfiori_docs.
    
    
    
    
    
    
    
    CASE iv_entity_name.
    
    WHEN ‘Documents’.
    
    
    
    
    “Falls Schlüssel in it_key_tab mitgeliefert wurden
    
    if lines( it_key_tab ) > 0.
    
    
    
    
    READ TABLE it_key_tab WITH KEY name = ‘IdHead’ INTO ls_key_tab.
    
    ls_documents-idhead = ls_key_tab-value.
    
    lv_idhead = ls_key_tab-value.
    
    
    
    
    else.
    
    “ansonsten befinden Sie sich in iv_slug
    
    
    
    
    split iv_slug at ‘;’ into lv_filename lv_idhead lv_categoryid.
    
    
    
    
    
    
    
    
    
    
    endif.
    
    
    
    
    
    
    
    “estimate Documentid:
    
    
    
    
    select max( documentid )  from ztfiori_docs into lv_documentid where idhead = lv_idhead.
    
    
    
    
    ls_documents-documentid = lv_documentid + 1.
    
    ls_documents-idhead = lv_idhead.
    
    
    
    
    “muss anders versorgt werden
    
    *        ls_key_tab-name = ‘Documentid’.
    
    *        ls_key_tab-value = ls_documents-documentid.
    
    *        append ls_key_tab to it_key_tab.
    
    
    
    
    ls_documents-mandt = sy-mandt.
    
    ls_documents-creationdate = sy-datum.
    
    ls_documents-categoryid = lv_categoryid.
    
    
    
    
    ls_documents-mimetype = is_media_resource-mime_type.
    
    ls_documents-filename = lv_filename.
    
    ls_documents-content = is_media_resource-value.
    
    ls_documents-creationdate = sy-datum.
    
    
    
    
    
    
    
    MOVE-CORRESPONDING ls_documents TO ls_docs.
    
    
    
    
    
    
    
    
    
    
    
    
    
    “INSERT INTO ztfiori_docs  VALUES ls_docs.
    
    
    
    
    modify ztfiori_docs from ls_docs.
    
    
    
    
    
    
    
    *        documentsset_get_entity(
    
    *          EXPORTING
    
    *            iv_entity_name     = iv_entity_name
    
    *            iv_entity_set_name = iv_entity_set_name
    
    *            iv_source_name     = iv_source_name
    
    *            it_key_tab         = it_key_tab
    
    *            it_navigation_path = it_navigation_path
    
    *          IMPORTING
    
    *            er_entity          = ls_documents ).
    
    
    
    
    copy_data_to_ref( EXPORTING is_data = ls_documents
    
    CHANGING  cr_data = er_entity ).
    
    
    
    
    WHEN OTHERS.
    
    ENDCASE.
    
    
    
    
    ENDMETHOD.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Public Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->/IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING(optional)
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING(optional)
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING(optional)
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR(optional)
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH(optional)
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY(optional)
    
    * | [<—] ER_STREAM                      TYPE REF TO DATA
    
    * | [<—] ES_RESPONSE_CONTEXT            TYPE        /IWBEP/IF_MGW_APPL_SRV_RUNTIME=>TY_S_MGW_RESPONSE_ENTITY_CNTXT
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM.
    
    **TRY.
    
    *CALL METHOD SUPER->/IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM
    
    **  EXPORTING
    
    **    iv_entity_name          =
    
    **    iv_entity_set_name      =
    
    **    iv_source_name          =
    
    **    it_key_tab              =
    
    **    it_navigation_path      =
    
    **    io_tech_request_context =
    
    **  IMPORTING
    
    **    er_stream               =
    
    **    es_response_context     =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    
    
    
    
    
    
    DATA:    ls_key      TYPE /iwbep/s_mgw_name_value_pair,
    
    ls_documents TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_documents,
    
    lv_idhead    TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_head-id_head,
    
    ls_docs      TYPE ztfiori_docs,
    
    ls_lheader  TYPE ihttpnvp,
    
    ls_stream   TYPE ty_s_media_resource,
    
    lv_filename TYPE string,
    
    lv_entity_name type /IWBEP/MGW_TECH_NAME.
    
    
    
    
    
    
    
    “Read entity_name (provided in io_tech_request_context or directly in iv_entity_name:
    
    
    
    
    lv_entity_name = IO_TECH_REQUEST_CONTEXT->get_entity_type_name( ).
    
    
    
    
    
    
    
    
    
    
    
    
    
    *    CASE iv_entity_name.
    
    CASE lv_entity_name.
    
    WHEN ‘Documents’.
    
    
    
    
    
    
    
    “Call Documents_Get_Entity (of the Media Set)
    
    *        READ TABLE it_key_tab WITH KEY name = ‘Idhead’ INTO ls_key.
    
    *        lv_idhead = ls_key-value.
    
    *
    
    *        SELECT SINGLE * FROM ztfiori_docs INTO CORRESPONDING FIELDS OF
    
    *          ls_documents WHERE  idhead = lv_idhead.
    
    
    
    
    TRY.
    
    CALL METHOD me->documentsset_get_entity
    
    EXPORTING
    
    iv_entity_name          = iv_entity_name
    
    iv_entity_set_name      = iv_entity_set_name
    
    iv_source_name          = iv_source_name
    
    it_key_tab              = it_key_tab
    
    *            io_request_object       = io_request_object
    
    io_tech_request_context = IO_TECH_REQUEST_CONTEXT
    
    it_navigation_path      = it_navigation_path
    
    IMPORTING
    
    er_entity               = ls_documents
    
    es_response_context     = ES_RESPONSE_CONTEXT
    
    .
    
    CATCH /iwbep/cx_mgw_busi_exception .
    
    CATCH /iwbep/cx_mgw_tech_exception .
    
    ENDTRY.
    
    
    
    
    
    
    
    
    
    
    ls_stream-value = ls_documents-content.
    
    ls_stream-mime_type = ls_documents-mimetype.
    
    
    
    
    lv_filename = ls_documents-filename.
    
    lv_filename = escape( val = lv_filename
    
    format = cl_abap_format=>e_url ).
    
    ls_lheader-name = ‘Content-Disposition’.
    
    ls_lheader-value = |inline; filename=”{ lv_filename }”|.
    
    set_header( is_header = ls_lheader ).
    
    
    
    
    copy_data_to_ref( EXPORTING is_data = ls_stream
    
    CHANGING  cr_data = er_stream ).
    
    
    
    
    ENDCASE.
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    endmethod.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Protected Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->DOCUMENTSSET_GET_ENTITY
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR
    
    * | [—>] IO_REQUEST_OBJECT              TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY(optional)
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY(optional)
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH
    
    * | [<—] ER_ENTITY                      TYPE        ZCL_ZODATA_PDF_UPLOAD_MPC=>TS_DOCUMENTS
    
    * | [<—] ES_RESPONSE_CONTEXT            TYPE        /IWBEP/IF_MGW_APPL_SRV_RUNTIME=>TY_S_MGW_RESPONSE_ENTITY_CNTXT
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    method DOCUMENTSSET_GET_ENTITY.
    
    **TRY.
    
    *CALL METHOD SUPER->DOCUMENTSSET_GET_ENTITY
    
    *  EXPORTING
    
    *    IV_ENTITY_NAME          =
    
    *    IV_ENTITY_SET_NAME      =
    
    *    IV_SOURCE_NAME          =
    
    *    IT_KEY_TAB              =
    
    **    io_request_object       =
    
    **    io_tech_request_context =
    
    *    IT_NAVIGATION_PATH      =
    
    **  IMPORTING
    
    **    er_entity               =
    
    **    es_response_context     =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    
    
    
    DATA: ls_key   TYPE /iwbep/s_mgw_name_value_pair,
    
    lv_idhead TYPE ZCL_ZODATA_PDF_UPLOAD_MPC_EXT=>TS_DOCUMENTS-idhead,
    
    ls_documents TYPE ZCL_ZODATA_PDF_UPLOAD_MPC_EXT=>TS_DOCUMENTS,
    
    lv_documentid TYPE ZCL_ZODATA_PDF_UPLOAD_MPC_EXT=>TS_DOCUMENTS-documentid.
    
    
    
    
    READ TABLE it_key_tab WITH KEY name = ‘Idhead’ INTO ls_key.
    
    lv_idhead = ls_key-value.
    
    
    
    
    READ TABLE it_key_tab WITH KEY name = ‘Documentid’ INTO ls_key.
    
    lv_documentid = ls_key-value.
    
    
    
    
    
    
    
    SELECT single *  FROM ztfiori_docs
    
    INTO CORRESPONDING FIELDS OF ls_documents WHERE idhead = lv_idhead
    
    and Documentid = lv_documentid.
    
    
    
    
    
    
    
    move-corresponding ls_documents to er_entity.
    
    
    
    
    
    
    
    endmethod.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Protected Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->DOCUMENTSSET_GET_ENTITYSET
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING
    
    * | [—>] IT_FILTER_SELECT_OPTIONS       TYPE        /IWBEP/T_MGW_SELECT_OPTION
    
    * | [—>] IS_PAGING                      TYPE        /IWBEP/S_MGW_PAGING
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH
    
    * | [—>] IT_ORDER                       TYPE        /IWBEP/T_MGW_SORTING_ORDER
    
    * | [—>] IV_FILTER_STRING               TYPE        STRING
    
    * | [—>] IV_SEARCH_STRING               TYPE        STRING
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITYSET(optional)
    
    * | [<—] ET_ENTITYSET                   TYPE        ZCL_ZODATA_PDF_UPLOAD_MPC=>TT_DOCUMENTS
    
    * | [<—] ES_RESPONSE_CONTEXT            TYPE        /IWBEP/IF_MGW_APPL_SRV_RUNTIME=>TY_S_MGW_RESPONSE_CONTEXT
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    METHOD documentsset_get_entityset.
    
    **TRY.
    
    *CALL METHOD SUPER->DOCUMENTSSET_GET_ENTITYSET
    
    *  EXPORTING
    
    *    IV_ENTITY_NAME           =
    
    *    IV_ENTITY_SET_NAME       =
    
    *    IV_SOURCE_NAME           =
    
    *    IT_FILTER_SELECT_OPTIONS =
    
    *    IS_PAGING                =
    
    *    IT_KEY_TAB               =
    
    *    IT_NAVIGATION_PATH       =
    
    *    IT_ORDER                 =
    
    *    IV_FILTER_STRING         =
    
    *    IV_SEARCH_STRING         =
    
    **    io_tech_request_context  =
    
    **  IMPORTING
    
    **    et_entityset             =
    
    **    es_response_context      =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    
    
    
    
    
    
    DATA: ls_key       TYPE /iwbep/s_mgw_name_value_pair,
    
    lv_idhead    TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_documents-idhead,
    
    ls_documents TYPE zcl_zodata_pdf_upload_mpc_ext=>ts_documents,
    
    lt_documents TYPE STANDARD TABLE OF zcl_zodata_pdf_upload_mpc_ext=>ts_documents.
    
    
    
    
    *    READ TABLE it_key_tab WITH KEY name = ‘Idhead’ INTO ls_key.
    
    *    lv_idhead = ls_key-value.
    
    
    
    
    LOOP AT it_filter_select_options ASSIGNING FIELD-SYMBOL(<ls_select_opt>).
    
    READ TABLE <ls_select_opt>-select_options ASSIGNING FIELD-SYMBOL(<ls_sel_op>) INDEX 1.
    
    IF sy-subrc EQ 0.
    
    IF <ls_select_opt>-property EQ ‘Idhead’.
    
    lv_idhead = <ls_sel_op>-low.
    
    *          select * from zmsq_doc_table APPENDING corresponding fields of table lt_documents
    
    *          where request_id = lv_reqid.
    
    ENDIF.
    
    ENDIF.
    
    ENDLOOP.
    
    
    
    
    
    
    
    SELECT * FROM ztfiori_docs up to 2 rows
    
    INTO CORRESPONDING FIELDS OF TABLE lt_documents WHERE idhead = lv_idhead.
    
    
    
    
    
    
    
    MOVE-CORRESPONDING lt_documents TO et_entityset.
    
    
    
    
    
    
    
    
    
    
    ENDMETHOD.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Protected Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->DOCUMENTSSET_UPDATE_ENTITY
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY_U(optional)
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH
    
    * | [—>] IO_DATA_PROVIDER               TYPE REF TO /IWBEP/IF_MGW_ENTRY_PROVIDER(optional)
    
    * | [<—] ER_ENTITY                      TYPE        ZCL_ZODATA_PDF_UPLOAD_MPC=>TS_DOCUMENTS
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    method DOCUMENTSSET_UPDATE_ENTITY.
    
    **TRY.
    
    *CALL METHOD SUPER->DOCUMENTSSET_UPDATE_ENTITY
    
    *  EXPORTING
    
    *    IV_ENTITY_NAME          =
    
    *    IV_ENTITY_SET_NAME      =
    
    *    IV_SOURCE_NAME          =
    
    *    IT_KEY_TAB              =
    
    **    io_tech_request_context =
    
    *    IT_NAVIGATION_PATH      =
    
    **    io_data_provider        =
    
    **  IMPORTING
    
    **    er_entity               =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    endmethod.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Protected Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->HEADSET_GET_ENTITY
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR
    
    * | [—>] IO_REQUEST_OBJECT              TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY(optional)
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITY(optional)
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH
    
    * | [<—] ER_ENTITY                      TYPE        ZCL_ZODATA_PDF_UPLOAD_MPC=>TS_HEAD
    
    * | [<—] ES_RESPONSE_CONTEXT            TYPE        /IWBEP/IF_MGW_APPL_SRV_RUNTIME=>TY_S_MGW_RESPONSE_ENTITY_CNTXT
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    method HEADSET_GET_ENTITY.
    
    *TRY.
    
    *CALL METHOD SUPER->HEADSET_GET_ENTITY
    
    *  EXPORTING
    
    *    IV_ENTITY_NAME          = @data( )
    
    *    IV_ENTITY_SET_NAME      = @data( )
    
    *    IV_SOURCE_NAME          = @data( )
    
    *    IT_KEY_TAB              = @data( )
    
    *    io_request_object       = @data( )
    
    *    io_tech_request_context = @data( )
    
    *    IT_NAVIGATION_PATH      = @data( )
    
    *  IMPORTING
    
    *    er_entity               = @data( )
    
    *    es_response_context     = @data( )
    
    *    .
    
    * CATCH /iwbep/cx_mgw_busi_exception .
    
    * CATCH /iwbep/cx_mgw_tech_exception .
    
    *ENDTRY.
    
    
    
    
    
    
    
    data: ls_key_tab like line of it_key_tab,
    
    lv_id_head TYPE ZCL_ZFIORI_DEMO_ODATA__MPC_EXT=>TS_HEAD-id_head.
    
    
    
    
    
    
    
    
    
    
    *Hauptprogramm:
    
    
    
    
    
    
    
    *Get key provided in it_key_tab:
    
    
    
    
    
    
    
    read table it_key_tab into ls_key_tab with key name = ‘IdHead’. “case-sensitive!
    
    
    
    
    if sy-subrc = 0.
    
    
    
    
    “Possible call exit-alpha routine
    
    
    
    
    lv_id_head = ls_key_tab-value.
    
    
    
    
    select single * from ztfiori_head into corresponding fields of er_entity where id_head = lv_id_head.
    
    
    
    
    endif.
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    endmethod.
    
    
    
    
    
    
    
    * <SIGNATURE>—————————————————————————————+
    
    * | Instance Protected Method ZCL_ZODATA_PDF_UPLOAD_DPC_EXT->HEADSET_GET_ENTITYSET
    
    * +————————————————————————————————-+
    
    * | [—>] IV_ENTITY_NAME                 TYPE        STRING
    
    * | [—>] IV_ENTITY_SET_NAME             TYPE        STRING
    
    * | [—>] IV_SOURCE_NAME                 TYPE        STRING
    
    * | [—>] IT_FILTER_SELECT_OPTIONS       TYPE        /IWBEP/T_MGW_SELECT_OPTION
    
    * | [—>] IS_PAGING                      TYPE        /IWBEP/S_MGW_PAGING
    
    * | [—>] IT_KEY_TAB                     TYPE        /IWBEP/T_MGW_NAME_VALUE_PAIR
    
    * | [—>] IT_NAVIGATION_PATH             TYPE        /IWBEP/T_MGW_NAVIGATION_PATH
    
    * | [—>] IT_ORDER                       TYPE        /IWBEP/T_MGW_SORTING_ORDER
    
    * | [—>] IV_FILTER_STRING               TYPE        STRING
    
    * | [—>] IV_SEARCH_STRING               TYPE        STRING
    
    * | [—>] IO_TECH_REQUEST_CONTEXT        TYPE REF TO /IWBEP/IF_MGW_REQ_ENTITYSET(optional)
    
    * | [<—] ET_ENTITYSET                   TYPE        ZCL_ZODATA_PDF_UPLOAD_MPC=>TT_HEAD
    
    * | [<—] ES_RESPONSE_CONTEXT            TYPE        /IWBEP/IF_MGW_APPL_SRV_RUNTIME=>TY_S_MGW_RESPONSE_CONTEXT
    
    * | [!CX!] /IWBEP/CX_MGW_BUSI_EXCEPTION
    
    * | [!CX!] /IWBEP/CX_MGW_TECH_EXCEPTION
    
    * +————————————————————————————–</SIGNATURE>
    
    method HEADSET_GET_ENTITYSET.
    
    **TRY.
    
    *CALL METHOD SUPER->HEADSET_GET_ENTITYSET
    
    *  EXPORTING
    
    *    IV_ENTITY_NAME           =
    
    *    IV_ENTITY_SET_NAME       =
    
    *    IV_SOURCE_NAME           =
    
    *    IT_FILTER_SELECT_OPTIONS =
    
    *    IS_PAGING                =
    
    *    IT_KEY_TAB               =
    
    *    IT_NAVIGATION_PATH       =
    
    *    IT_ORDER                 =
    
    *    IV_FILTER_STRING         =
    
    *    IV_SEARCH_STRING         =
    
    **    io_tech_request_context  =
    
    **  IMPORTING
    
    **    et_entityset             =
    
    **    es_response_context      =
    
    *    .
    
    ** CATCH /iwbep/cx_mgw_busi_exception .
    
    ** CATCH /iwbep/cx_mgw_tech_exception .
    
    **ENDTRY.
    
    
    
    
    
    
    
    *TRY.
    
    *CALL METHOD me->headset_get_entityset
    
    *  EXPORTING
    
    *    iv_entity_name           = iv_entity_name
    
    *    iv_entity_set_name       = iv_entity_set_name
    
    *    iv_source_name           = iv_source_name
    
    *    it_filter_select_options = it_filter_select_options
    
    *    is_paging                = is_paging
    
    *    it_key_tab               = it_key_tab
    
    *    it_navigation_path       = it_navigation_path
    
    *    it_order                 = it_order
    
    *    iv_filter_string         = iv_filter_string
    
    *    iv_search_string         = iv_search_string
    
    *    io_tech_request_context  = io_tech_request_context
    
    *  IMPORTING
    
    *    et_entityset             = et_entityset
    
    *    es_response_context      = es_response_context
    
    *    .
    
    * CATCH /iwbep/cx_mgw_busi_exception .
    
    * CATCH /iwbep/cx_mgw_tech_exception .
    
    *ENDTRY.
    
    *
    
    *
    
    
    
    
    
    
    
    
    
    
    DATA: ls_filter       TYPE /iwbep/s_mgw_select_option,
    
    lt_filter_name2 TYPE /iwbep/t_cod_select_options,
    
    lr_name2        TYPE RANGE OF zcl_zfiori_demo_odata__mpc_ext=>ts_head-name2,
    
    lrs_name2       LIKE LINE OF lr_name2,
    
    
    
    
    lt_filter_idhead TYPE /iwbep/t_cod_select_options,
    
    lr_idhead        TYPE RANGE OF zcl_zfiori_demo_odata__mpc_ext=>ts_head-id_head,
    
    lrs_idhead       LIKE LINE OF lr_idhead,
    
    
    
    
    lt_entityset    TYPE STANDARD TABLE OF zcl_zfiori_demo_odata__mpc=>ts_head,
    
    ls_entityset    LIKE LINE OF lt_entityset,
    
    lv_filter_string type string,
    
    
    
    
    ls_orderby type /iwbep/s_mgw_sorting_order.
    
    
    
    
    
    
    
    
    
    
    
    
    
    *Check, if filter are applied
    
    
    
    
    IF lines( it_filter_select_options ) NE 0.
    
    
    
    
    LOOP AT it_filter_select_options INTO ls_filter.
    
    
    
    
    CASE ls_filter-property.
    
    
    
    
    when ‘IdHead’.
    
    
    
    
    lt_filter_idhead[] = ls_filter-select_options[].
    
    
    
    
    concatenate lv_filter_string ‘id_head in lt_filter_idhead’ into lv_filter_string.
    
    
    
    
    when ‘Name2’.
    
    
    
    
    if lv_filter_string is not initial.
    
    
    
    
    concatenate lv_filter_string ‘and’ into lv_filter_string.
    
    
    
    
    endif.
    
    
    
    
    
    
    
    lt_filter_name2[] = ls_filter-select_options[].
    
    
    
    
    concatenate lv_filter_string ‘name2 in lt_filter_name2’ into lv_filter_string.
    
    
    
    
    WHEN OTHERS.
    
    ENDCASE.
    
    
    
    
    
    
    
    ENDLOOP.
    
    
    
    
    ENDIF.
    
    
    
    
    *Hole Daten:
    
    
    
    
    SELECT * FROM ztfiori_head INTO CORRESPONDING FIELDS OF TABLE lt_entityset where (lv_filter_string).
    
    
    
    
    *Apply Ordering
    
    
    
    
    loop at it_order into ls_orderby.
    
    
    
    
    case ls_orderby-property.
    
    
    
    
    when ‘IdHead’.
    
    
    
    
    if ls_orderby-order eq ‘desc’.
    
    sort lt_entityset by id_head descending.
    
    
    
    
    elseif ls_orderby-order eq ‘asc’.
    
    sort lt_entityset by id_head ascending.
    
    
    
    
    endif.
    
    
    
    
    when ‘Name2’.
    
    
    
    
    if ls_orderby-order eq ‘desc’.
    
    sort lt_entityset by Name2 descending.
    
    
    
    
    elseif ls_orderby-order eq ‘asc’.
    
    sort lt_entityset by Name2 ascending.
    
    
    
    
    endif.
    
    
    
    
    
    
    
    endcase.
    
    
    
    
    endloop.
    
    
    
    
    
    
    
    move-corresponding lt_entityset to et_entityset.
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    endmethod.
    
    ENDCLASS.

     

     

    <mvc:View controllerName="zpdf.zfiori_pdf_upld_app.controller.View1" 
    		  xmlns:mvc="sap.ui.core.mvc" 
    		  xmlns:html="http://www.w3.org/1999/xhtml"
    		  displayBlock="true"
    		  xmlns="sap.m"
    		  xmlns:l="sap.ui.layout"
    		  xmlns:u="sap.ui.unified"
    		  class="viewPadding">
    	<App id="idAppControl">
    		<pages>
    			<!--uploadUrl="/sap/opu/odata/sap/ZODATA_PDF_UPLOAD_SRV/HeadSet(IdHead='0001')/Head2Documents"-->
    							
    			<Page title="{i18n>title}">
    				<content>
    					<l:VerticalLayout>
    						<UploadCollection
    							id="fileUploader"
    							fileType="pdf"
    							mimeType="pdf"
    							instantUpload="false"
    							mode="MultiSelect"
    							multiple="true"
    							sameFilenameAllowed="false"
    							showSeparators="All"
    							terminationEnabled="true"
    							uploadEnabled="true"
    							typeMissmatch="onTypeMissmatch"
    							change="onValueChange"
    							uploadComplete="onUploadComplete"
    							beforeUploadStarts="onBeforeUploadStarts"
    							fileDeleted="onFileDeleted"
    							fileRenamed="onFileRenamed"
    							items="{itemsData>/DocItemsData}">
    							
    							<!--items="{-->
    							<!--path: 'itemsData'-->
    							<!--}"-->
    							
    							<items>
    								<!--url="{itemsData>url}"-->
    								<!--url="{parts: ['DocumentId'], formatter: '.formatter.formatURL'}"-->
    								<!--url="{path: 'url', formatter: '.formatter.formatURL'}"-->
    								<UploadCollectionItem
    									documentId="{itemsData>DocumentId}"
    									fileName="{itemsData>Filename}"
    									mimeType="{itemsData>mimeType}"
    									thumbnailUrl="{itemsData>thumbnailUrl}"
    									url="{parts: ['itemsData>Idhead','itemsData>Documentid'], 
    									formatter: '.formatter.formatURL'}"
    									>
    									<attributes>
    										<ObjectAttribute active="{active}"/>
    									</attributes>
    								</UploadCollectionItem>
    							</items>
    					</UploadCollection>
    						
    						<!--<u:FileUploader-->
    						<!--id="fileUploader"-->
    						<!--name="myPDFUpload"-->
    						<!--tooltip="PDF auswählen"-->
    						<!--uploadComplete="onUploadComplete"-->
    						<!--uploadUrl="upload/"-->
    						<!--change="onValueChange"-->
    						<!--typeMissmatch="onTypeMissmatch"-->
    						<!--fileType="pdf"-->
    						<!--mimeType="pdf"-->
    						<!--placeholder="Bitte wählen Sie eine Datei zum hochladen..."-->
    						<!--sendXHR="true"-->
    						<!--useMultipart="false"-->
    						<!--/>-->
    						<Button
    						text="Hochladen"
    						press="onUploadPress"
    						/>
    					</l:VerticalLayout>
    				</content>
    			</Page>
    		</pages>
    	</App>
    </mvc:View>
    sap.ui.define([
    	"sap/ui/core/mvc/Controller",
    	"sap/m/MessageToast",
    	"zpdf/zfiori_pdf_upld_app/model/formatter",
    ], function (Controller, MessageToast, formatter) {
    	"use strict";
    
    	return Controller.extend("zpdf.zfiori_pdf_upld_app.controller.View1", {
    		formatter: formatter,
    		
    		onInit: function () {
    			
    			var that = this;
    			
    			var sIdhead = "0001";
    			
    			var oFileUploader = that.getView().byId("fileUploader");
    			var sRootUrl = that.getOwnerComponent().getModel().sServiceUrl;
    
    			//var sKey = getBindingContext().getProperty("IdHead");
    			//var sKey = "0001"; //später auslesen
    			//var sUrl = sRootUrl + "/HeadSet(IdHead='" + sKey + "')/Head2Documents";
    			
    	
    			//Szenario: OData-Service mit nur einer Entität Documents. 
    			var sUrl = sRootUrl + "/DocumentsSet()";
    			
    			console.log(sUrl);
    			
    			oFileUploader.setUploadUrl(sUrl);
    			
    			var oModel = that.getOwnerComponent().getModel();
    			
    			var oItemModel = that.getOwnerComponent().getModel("itemsData");
    			
    			var aFilter = [new sap.ui.model.Filter("Idhead", "EQ", sIdhead)];
    			
    			var oItemData = oItemModel.getData();
    			
    			var oDocItems = [];
    			
    			oModel.read("/DocumentsSet", {
                                filters: aFilter,
                                                               
    							//Im Success-Fall, stehen die vorhandenen Dokumente in oData.results   
                                success: jQuery.proxy(function(oData, oResponse) {
                                                                                 
                                console.log("oData ",oData);
                                console.log("oResponse ",oResponse);
                                                                                 
                                oDocItems = oData.results;
                                console.log("oItemData= ",oDocItems );
                                                                                 
                                //oItemData.DocItemsData.unshift(oDocItems);
                                                                                 
    				    		//Dokumente ins locale Modell laden
                                oItemModel.setProperty("/DocItemsData",oDocItems);
                                //that.getOwnerComponent().getModel("itemsData").refresh();
                                                                                 
                                                                   } )
                                                                  
                                                   });
    
    			
    			// // //delete first entry:
    			// var oItemModel = this.getOwnerComponent().getModel("itemsData");
    			
    			// //set OneTime Bidning to False
    			// //oItemModel.setDefaultBindingMode("OneTime", false);
    			
    			// var oData = oItemModel.getData();
    			
    			
    			
    			// console.log("Init-Odata:", oData);
    			
    			// console.log(oData.DocItemsData);
    			
    
    		},
    		
    	
    		//nicht verwendet
    		onUploadPress2: function(oEvent) {
                                                  
            var oFileUploader = this.byId("fileUploader");
            //vorher Anpassungen in der neo-app.json notwendig,
            //damit URL aufgelöst werden kann
            var sUrlRoot = "/sap/opu/odata/sap/ZMSQ_DOCUMENTS_SRV";
            //var sUrl = sUrlRoot + "/HeadSet(Pernr='0001')/Head2Documents";
            //var sUrl = sUrlRoot + "/DocumentsSet(Pernr='1',RequestId=guid'005056B4-3629-1ED4-98E9-5ACA956A40F8',Documentid=guid'005056B4-3629-1ED4-98E9-5ACA956A40F8')";
            var sUrl = sUrlRoot + "/DocumentsSet()";
            
            console.log(sUrl);
            //var sUrl = sUrlRoot + "/DocumentsSet(Idhead='0001',Documentid='0001')/$value";
            //var sUrl = sUrlRoot + "/HeadSet(IdHead='0001')/H2D/$value";
        	if(!oFileUploader.getValue()) {
                MessageToast.show("Bitte wählen Sie ein PDF-Dokument");} 
                
                else {
             
              //manuelles auslesen des x-csrf-Tokens, im Falle wenn die Anwendung nicht an einem Modell hängt,
              //ansonsten mittelns:  sap.ui.getCore().getModel().refreshSecurityToken(); innerhalb des onUploaddPress
             //siehe onUploadPress2
             //zunächst, den bestehenden Parameter löschen
                                                  
              var _csrfToken = "";
              jQuery.ajax({
                url: sUrlRoot,
                headers: {
                    		"X-CSRF-Token": "Fetch",
                    		"X-Requested-With": "XMLHttpRequest",
                    		"DataServiceVersion": "2.0"
                                   },
                                   type: "GET",
                                   contentType: "application/json",
                                   dataType: 'json',
                                  
                success: function(data, textStatus, jqXHR) {
                    	_csrfToken = jqXHR.getResponseHeader('x-csrf-token');
                         console.log(_csrfToken);
                                  
                                  
                                  
                                  
                                   //Reichere Header Parameter an:
                                  
                                   //Prüfung, ob nicht bereits vorhanden
                                   oFileUploader.removeAllHeaderParameters();
                                  
                                   //x-csrf-token:
                                   oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({
                                   name: "x-csrf-token",
                                   value: _csrfToken           }));
                                  
                                   //Füge Slug-Parameter hinzu, um weitere Informatinen anzureichern
                                  
                    oFileUploader.insertHeaderParameter(
                                   new sap.ui.unified.FileUploaderParameter({
                                                   name: "slug", value: oFileUploader.getValue() }));
                                                  
                                                  
                    console.log(oFileUploader);     
                   
                    console.log(oFileUploader.getHeaderParameters());
                   
                   
                    oFileUploader.setUploadUrl(sUrl);
                                                   oFileUploader.upload();
                   
                                   }});        
                                                                  
                                                                  
                                                                  
                                                   }
                                                  
                                   },
    		
    		//fired after Upload is finished
    		onUploadComplete: function(oEvent) {
    			
    			var that = this;
    			
    			//debugger;
    		
    			var sResponse = oEvent.getParameter("response");
    			
    			
    			// Zuvor hochgeladenes Dokument dem lokalen Modell manuell hinzufügen
    			
    			var that = this;
    			
    			//var oFileUploader = that.byId("fileUploader");
    			var oFileUploader = oEvent.getSource();
    			
    			console.log("FileUploadBySource = ",oFileUploader);
    			console.log("FileUploadById= ", that.byId("fileUploader"));
    			console.log("oEvent=",oEvent);
    			
    			
    			console.log("Files = ",oEvent.getParameter("files"));
    			
    			
    			var oItemModel = this.getView().getModel("itemsData");
    			
    			//set OneTime Bidning to False
    			//oItemModel.setDefaultBindingMode("OneTime", false);
    			
    			var oData = oItemModel.getData();
    			
    			//ToDos: Loop implementieren, über sämtliche hochgeladene Dateien
    			//var sFileName = oEvent.getParameter("files")[0].name;
    			//In dieser Methode, ist die Eigenschaft FileName und nicht mehr name.
    			
    			var oFiles = oEvent.getParameter("files");
    			
    			console.log("oFiles = ", oFiles);
    			
    			var sFileName = oFiles[0].fileName;
    			//console.log("sFileName=",sFileName);
    			
    			console.log("oData = ",  oData);
    			
    			//the returned URL to the created entity/pdf-document:
    			var sLocation = oFiles[0].headers.location;
    			console.log(sLocation);
    			
    			//Estimate values for keys:
    			
    			// var sKey1= "Idhead";
    			
    			// //length of the variable itself
    			// var sLenghtKey1 = sKey1.length;
    			// console.log(sLenghtKey1);
    			// //length of Key1-value: Depends on the domain/data element (abap)
    			// var sKey1ValLength = "4";
    			
    			
    			// var sIdxKey1 = sLocation.indexOf("Idhead");
    			// console.log(sIdxKey1);
    			
    			
    			// //Methode substring hier anscheinend falsch im Chrome!! agiert eher wie substr
    			// //var sKey1Val = sLocation.substring(sIdxKey1 + sLenghtKey1 + 2, sIdxKey1 + sLenghtKey1 + 2 + sKey1ValLength );
    			
    			// var sKey1Val = sLocation.substr(sIdxKey1 + sLenghtKey1 + 2,  sKey1ValLength );
    			
    			
    			// console.log(sKey1Val);
    			
    			//provide name of key fields and the length of their literals
    			
    			//Number of Keys
    			var iNumbOfKeys = 2;
    			
    			var aKey = new Array(iNumbOfKeys);
    			
    			console.log(aKey);
    			
    			for (var i = 0; i < aKey.length; i++) {
    				
    				aKey[i] = new Array(2);
    			}
    			
    			
    			
    			aKey[0][0] = "Idhead";
    			aKey[0][1] = "4";
    			
    			aKey[1][0] = "Documentid";
    			aKey[1][1] = "4";
    			
    			
    			
    			var aKeyVal =	that._estimateKeyValue(aKey, sLocation);
    
    			console.log(aKeyVal);		
    			
    			//Zuweisung der Werte im lokalen Modell
    			oData.DocItemsData.unshift({
    				
    				"Idhead": aKeyVal[0][1],
    				"Documentid": aKeyVal[1][1],
    				"Filename": sFileName,// set this in order to display the filename
    				"mimeType": "",
    				"CreationDate" : "",
    				"CreatedBy": "",
    				"thumbnailUrl": "",
    				"url": "",
    				"attributes": [
    					{
    					"title": "title",
    					"active": true
    					}
    				]
    			});
    			
    			//var vIdhead =  $(sLocation).filter("Idhead=").text();
    			
    			//Idhead:
    			// jQuery(function(){
    			  
    			//   vIdhead =	$(sLocation).filter("Idhead=").text();
    				
    			// });
    			
    			
    			
    			//console.log(vIdhead);
    			
    			
    			// oData.DocItemsData.unshift({
    				
    			// 	"Idhead": "0001",
    			// 	"Documentid": "0001",
    			// 	"fileName": sFileName,// set this in order to display the filename
    			// 	"mimeType": "",
    			// 	"CreationDate" : "",
    			// 	"CreatedBy": "",
    			// 	"thumbnailUrl": "",
    			// 	"url": "",
    			// 	"attributes": [
    			// 		{
    			// 		"title": "title",
    			// 		"active": true
    			// 		}
    			// 	]
    			// });
    			
    			////oFileUploader.getBinding("items").refresh();
    			console.log("itemsBinding", oFileUploader.getBinding("items"));
    			
    			this.getView().getModel().refresh();
    			this.getView().getModel("itemsData").refresh();
    			
    			//this.getView().getModel("itemsData").refresh();
    			console.log("oFileUploader=",oFileUploader);
    			
    			//Test, ob das itemsData-Modell dem FileUploader auch zugewiesen ist (aus console)
    			//sap.ui.getCore().byId("__xmlview0--fileUploader").getModel("itemsData");
    			
    			// var oFileUploader = this.byId("fileUploader");
    			
    			// var oData = oFileUploader.getModel().getData();
    			
    			// console.log("oData=",oData);
    			
    			 //console.log(sResponse);
    			 //console.log(oEvent);
    			
    			// if (sResponse) {
    			// 	var sMsg = "";
    			// 	var m = /^\[(\d\d\d)]:(.*)$/.exec(sResponse);
    			
    			// 	if (m[1] == "200") //http-status code
    			// 	{
    			// 		sMsg = "Return Code: " + m[1] + "\n" + m[2] + "(Upload erfolgreich)" ;
    			// 		oEvent.getSource().setValue("");
    			// 	} else {
    					
    			// 		sMsg = "Return Code: " + m[1] + "\n" + m[2] + "(Upload fehlerhaft)" ;
    					
    			// 	}
    				
    			// 	MessageToast.show(sMsg);
    			//}
    		
    		
    			
    		
    		},
    		
    		onUploadPress: function(oEvent) {
    			
    			var oFileUploader = this.byId("fileUploader");
    			console.log(oFileUploader);
    			
    			//Prüfen, ob Anhänge existieren
    			if(oFileUploader.getItems().length == 0 ) {
    				MessageToast.show("Bitte wählen Sie ein PDF-Dokument");
    			} else {
    			
    			
    			oFileUploader.upload();
    			
    			}
    		},
    		
    		
    		
    		
    		//Important: Set X-CSRF-Token here
    		onValueChange: function(oEvent) {
    			
    			var oFileUploader = oEvent.getSource();
    			
    			//Eventuell bereits vorhandene Header-Parameter löschen
        		oFileUploader.removeAllHeaderParameters();
    			
    			//Get x-csrf-token:
    			var oModel = this.getView().getModel();
    			
    			//console.log("oModel: ",oModel);
    			
    			//oder: oModel.refreshSecurityToken()
    			var oToken = oModel.getSecurityToken();
    			//console.log("oToken: ",oToken);
    			
    			//x-csrf-token:
        		oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
        		name: "x-csrf-token",
        		value: oToken	}));
    			
    			
    			
    			
    			
    			
    			// //URL
    			// //vorher Anpassungen in der neo-app.json notwendig, 
    			// //damit URL aufgelöst werden kann
    			
    			// var sUrlRoot = "/sap/opu/odata/sap/ZODATA_PDF_UPLOAD_SRV";
    			// var sUrl = sUrlRoot + "/HeadSet(IdHead='0001')/Head2Documents";
    			
    			// //console.log(sUrl);
    			
    				
    			//oFileUploader.setUploadUrl(sUrl);
    		
    			//var sUrl = sUrlRoot + "/DocumentsSet(Idhead='0001',Documentid='0001')/$value";
    			//var sUrl = sUrlRoot + "/HeadSet(IdHead='0001')/H2D/$value";
    			
    			
    			
    			
    			
    			
    				
    			// //manuelles auslesen des x-csrf-Tokens, im Falle wenn die Anwendung nicht an einem Modell hängt, 
    			// //ansonsten mittelns:  sap.ui.getCore().getModel().refreshSecurityToken(); innerhalb des onUploaddPress
    			// //siehe onUploadPress2
    			
    			// //zunächst, den bestehenden Parameter löschen
    			
    			// var _csrfToken = "";
    			// jQuery.ajax({
       // 		url: sUrlRoot,
       // 		headers: {
       //     	"X-CSRF-Token": "Fetch",
       //     	"X-Requested-With": "XMLHttpRequest",
       //     	"DataServiceVersion": "2.0"
       // 		},
       // 		type: "GET",
       // 		contentType: "application/json",
       // 		dataType: 'json',
        		
       // 		success: function(data, textStatus, jqXHR) {
       //     	_csrfToken = jqXHR.getResponseHeader('x-csrf-token');
            	
       //     	console.log(_csrfToken);
        		
        		
       // 		//Reichere Header Parameter an:
        		
       // 		//Prüfung, ob nicht bereits vorhanden
       // 		oFileUploader.removeAllHeaderParameters();
        		
        		
       // 		// //x-csrf-token:
       // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
       // 		// name: "x-csrf-token",
       // 		// value: _csrfToken	}));
        		
        		
       // 		// //hinzufügen von Parameter sendXHR
       // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
        			
       // 		// 	name: "sendXHR",
       // 		// 	value: "true"
        			
       // 		// }));
        		
       // 		// //useMultipart="false"
       // 		// oFileUploader.addHeaderParameter(new sap.m.UploadCollectionParameter({
       // 		// name: "useMultipart",
       // 		// value: "true"	}));
        			
        	
            			
            			
            
            			
       //     	console.log(oFileUploader.getItems());		
            			
       //     	console.log(oFileUploader);	
            	
       //     	console.log(oFileUploader.getHeaderParameters());
            	
            	
       ////     	oFileUploader.setUploadUrl(sUrl);
    			// // oFileUploader.upload();
            	
       // 		}});	
    				
    			console.log(oFileUploader);	
    				
    			
    		},
    		
    		//Important: Set Slug here
    		onBeforeUploadStarts: function(oEvent) {
    			
    			//Try to realize Import Parameters for Idhead and 
    			
    			var sIdHead = "0001";
    			var sCategoryid = "0001";
    			
    			//DEL: AM 20190410
    			// //var oFileUploader = this.byId("fileUploader");
    			// var oFileUploader = oEvent.getSource();
    			
    			// //Slug:
    			
    			// //hole Dateinamen der einzelnen Anhängen
        		
       // 		var oItems = oFileUploader.getItems();
       // 		var sSlug = "";
       // 		var sSep = ", "; //separation
        		
       // 		// oItems.forEach(function(i){
        			
       // 		// });
        		
       // 		console.log(oItems);
       // 		console.log(oItems.length);
        		
       // 		for( var i = 0; i< oItems.length; i++ ) {
        		
       // 			//console.log(oItems[i].getFileName());
       // 			sSlug +=  oItems[i].getFileName() + sSep;
        			
       // 		}
        		
       // 		console.log(sSlug);
        		
        		//With fileName beeing a property of aggregation
        		//UploadCollectionItem
        		var sSlug = oEvent.getParameter("fileName");
        		
        		sSlug = sSlug + ";" + sIdHead + ";" + sCategoryid;
        		
        		console.log(sSlug);
        		
        		//Füge Slug-Parameter hinzu, um weitere Informatinen (Filename) anzureichern
        	
        		var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
            			name: "slug", value: sSlug });
            	
            	//add it like this: Important, otherwise it won't work!!		
        		oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
        		
        		//Won't work like this!!
            	// oFileUploader.addHeaderParameter(
            	// 	new sap.m.UploadCollectionParameter({
            	// 		name: "slug", value: sSlug }));
    			
    			//console.log(oFileUploader);
    			
    		},
    		
    		onFileDeleted: function() {},
    		
    		
    		onFileRenamed: function() {},
    		
    		onTypeMissmatch: function(oEvent) {
    			MessageToast.show("Bitte wählen Sie nur PDF-Dokumente");
    		},
    		
    		onAfterRendering: function() {
    			
    			// // //delete first entry:
    			// var oItemModel = this.getView().getModel("itemsData");
    			
    			// //set OneTime Bidning to False
    			// //oItemModel.setDefaultBindingMode("OneTime", false);
    			
    			// var oData = oItemModel.getData();
    			
    			
    			
    			// console.log("onAfterRendering-Odata:", oData);
    			
    			// console.log(oData.DocItemsData);
    			
    			
    		},
    		
    		/**receives an array of key-fields and the length of their respective values, and the URL from which 
    		*  the key value should be extracted
    		**/
    		_estimateKeyValue: function(aKey, sUrl) {
    			
    			console.log("here");
    			
    			//Estimate values for keys:
    			var aKeyLength = aKey.length;
    			
    			var aKeyVal = new Array(aKeyLength);
    			
    			for(var j = 0; j < aKeyLength; j++) { 
    				
    				aKeyVal[j] = new Array(2);
    				
    			}
    			
    			console.log("nach 1. Loop",aKeyLength );
    			
    			for(var i = 0; i < aKeyLength; i++) {
    				
    				//the name of the Key as string
    				var sKey = aKey[i][0];
    				
    				//length of the variable itself
    				var sLenghtKey = sKey.length;
    				
    				//length of Key-value: Depends on the domain/data element (abap)
    				var sKeyValLength = aKey[i][1];
    				
    				//Index of first occurence of sKey in the URL
    				var sIdxKey = sUrl.indexOf(sKey);
    			
    				var sKeyVal = sUrl.substr(sIdxKey + sLenghtKey + 2, sKeyValLength);
    				
    				
    				
    				console.log(sKey);
    				console.log(sKeyVal);
    				
    				aKeyVal[i][0] = sKey;
    				aKeyVal[i][1] = sKeyVal;
    				
    				
    			}
    			
    			return aKeyVal;
    			
    				
    			
    		},
    		
    		
    	});
    });

     

     

    sap.ui.define([
    	], function () {
    		"use strict"; 
    		
    		return {
    			
    			
    			formatURL: function(sIdhead, sDocumentId) {
    				
    				console.log("formatter");
    				
    				var sRootUrl = this.getView().getModel().sServiceUrl;
    				
    				console.log("formatter:sRootUrl", sRootUrl);
    				
    				var sPath = sRootUrl + this.getView().getModel().createKey("/DocumentsSet",{
    					
    					//ToDos: Schlüsselfelder
    					
    					Idhead : sIdhead,
    					Documentid : sDocumentId
    					// Idhead : "0001",
    					// Documentid : "0001"
    					//RequestId: "",
    					//CategoryId: ""
    					
    				}) + "/$value";
    				
    				console.log("formatter:sPath", sPath);
    				
    				return sPath;
    			}
    			
    		};
    		
    	});

     

    I created an emplty json model, and a source file “DocItems”, which was later filled by the get_entity-call:

    path: model/DocItems.json (it is in the model-folderm below webapp)

    {
    “DocItemsData”: []

    }

    The model is just an file in the Model-folder:

     

     

    It has to be registered in the manifest:

    In the data sources section of the manifest:

    “DocItems”: {
    “uri”: “model/DocItems.json”,
    “type”: “JSON”
    }

    in the model-section of the Manifest:

    “itemsData”: {
    “type”: “sap.ui.model.json.JSONModel”,
    “dataSource”: “DocItems”,
    “settings”: {
    “defaultBindingMode”: “TwoWay”
    },
    “preload”: false
    }