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

[former_member414368]

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");
      }
      
  });
  
});

[former_member414368 · Accepted solution]

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

[anudeep_paleru]

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");

}

[former_member414368]

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.