Skip to Content

sap.m.UploadCollectionItem Extenstion: Override download method to add custom headers

I have extended the sap.m.UploadCollection as you can see in the code below.
I then use it in my view xml:

<mobRSCustom:CustomUploadCollectionItem documentId="{id}" fileName="{fileName}" url="xxx" mimeType="{mimeType}" press="testD" ></mobRSCustom:CustomUploadCollectionItem>

But the method does not override the download behaviour as promised in the source code:

* This event is triggered when the user presses the filename link. * If this event is provided, it overwrites the default behavior of opening the file. * @since 1.50.0 */ press: {},

What am I doing wrong? Please help, its important. The thing is, that I would like to add headers to the download request. (It's easy to add headers for uploading the file, but for downloading there is absolutely nothing to find).

sap.ui.define([
	"sap/m/UploadCollectionItem"
], function(UploadCollectionItem) {
	
  return UploadCollectionItem.extend("at.bft.mobrs.controller.expenses.CustomUploadCollectionItem",{
	  
	  metadata: {
          events: {
        	  "press" : {}
          }
      },
	  
	  init: function() {
		  sap.m.UploadCollectionItem.prototype.init.apply(this, arguments);
      },
      
      onpress: function(evt) {
    	  this.firePress();
      }
      
      testD: function(evt) {
    	  console.log("HI");
      }
      
  });
  
});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Feb 23 at 11:27 AM

    Hello,

    i have finally solved the issues! Took me three days, but hey.

    For everyone who is facing the same issue:
    Just extend your UploadCollection only and override the method "_triggerLink".

    This will work and here is a tested and working example:

     _triggerLink: function(event) {
    	  		var iLine, aId;
    	
    	  		if (this.editModeItem) {
    	  			//In case there is a list item in edit mode, the edit mode has to be finished first.
    	  			this._handleOk(event, this.editModeItem, true);
    	  			if (this.sErrorState === "Error") {
    	  				//If there is an error, the link of the list item must not be triggered.
    	  				return;
    	  			}
    	  			this.sFocusId = event.getParameter("id");
    	  		}
    	  		aId = event.oSource.getId().split("-");
    	  		iLine = aId[aId.length - 2];
    	  		
    	  		var rawExtendedUrl = this.aItems[iLine].getProperty("url");
    	  		var extendedUrl = rawExtendedUrl.substring(rawExtendedUrl.split("/", 2).join("/").length, rawExtendedUrl.length);;
    	  		var finalUrl = this._correspondingController.getBaseUrl() + extendedUrl;
    	  		console.log(finalUrl);
    	  		
    	  		var oBlob = null;
    			var oXhr = new window.XMLHttpRequest();
    			oXhr.open("GET", finalUrl);
    			oXhr.responseType = "blob";// force the HTTP response, response-type header to be blob
    			oXhr.setRequestHeader("your header name", "your header value");
    			oXhr.onload = function() {
    				var sFileName = this.aItems[iLine].getProperty("fileName");
    				var oFileNameAndExtension = this._splitFileName(sFileName, false);
    				var sFileExtension = oFileNameAndExtension.extension;
    				sFileName = oFileNameAndExtension.name;
    				oBlob = oXhr.response; // oXhr.response is now a blob object
    				FileUtil.save(oBlob, sFileName, sFileExtension, this.aItems[iLine].getProperty("mimeType"), "utf-8");
    			}.bind(this);
    			oXhr.send();
    	  	},
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 22 at 04:52 AM

    Hi Mario,

    Please try with below code on press implement below logic and dont forget to define it as 'sap/m/UploadCollectionParameter'

    onPress: function(oEvent)

    {

    var oUploadCollection = oEvent.getSource();

    // Header Token this.getModel().refreshSecurityToken();

    var secToken = this.getModel().getSecurityToken();

    var oCustomerHeaderToken = new UploadCollectionParameter({ name: "x-csrf-token", value: secToken });

    oUploadCollection.addHeaderParameter(oCustomerHeaderToken); oUploadCollection.setUploadUrl(this.getModel().sServiceUrl + "/EntitySet");

    }

    Add comment
    10|10000 characters needed characters exceeded

    • Hello Anudeep,

      firstly, thank you very much for your reply. I tried it, but the problem is, that my press function never gets called.
      My xml code looks like this:

      <Custom:CustomUploadCollection id="UploadCollection"

      maximumFileSize="50"

      maximumFilenameLength="55"

      multiple="false"

      change="onChange"

      beforeUploadStarts="onBeforeUploadStarts"

      noDataText=" "

      uploadEnabled="{ parts:[ '/allowedActions' , 'string>EDIT' ], formatter: '.actionAllowed' }"

      fileDeleted="onFileDeleted"

      fileRenamed="onFileRenamed"

      filenameLengthExceed="onFilenameLengthExceed"

      fileSizeExceed="onFileSizeExceed"

      typeMissmatch="onTypeMissmatch"

      uploadComplete="onUploadComplete"

      items="{/attachments}"

      uploadUrl="censored">

      <Custom:items>

      <Custom:CustomUploadCollectionItem documentId="{id}"

      fileName="{fileName}"url="{censored}"

      mimeType="{mimeType}"

      press="onPress"

      visibleEdit="{ parts:[ '/allowedActions' , 'string>EDIT' ], formatter: '.actionAllowed' }"

      enableDelete="{ parts:[ '/allowedActions' , 'string>EDIT' ], formatter: '.actionAllowed' }"

      enableEdit="{ parts:[ '/allowedActions' , 'string>EDIT' ], formatter: '.actionAllowed' }">

      <Custom:attributes>

      <ObjectAttributetext="{uploadedBy}"/>

      </Custom:attributes>

      </Custom:CustomUploadCollectionItem>

      </Custom:items>

      </Custom:CustomUploadCollection>



      And inside the extended uploadcollectionitem controller i got the code that you can see in the main thread.

      Why is the "onPress" method there never called? I simply dont get it.