cancel
Showing results for 
Search instead for 
Did you mean: 

sap.ui.unified.fileuploader vs. sap.m.uploadcollection and CSRF token

roger_beach
Participant
0 Kudos

I have an application where originally we were using the uploadcollection control. It worked, however, it was overkill for what we were trying to accomplish.

We decided to use the fileuploader instead. After switching out the control on the view and switching out in the controller to from sap.ui.unified.FileUploaderParameter to sap.m.UploadCollectionParameter, we get errors.

The code appears to get the token into sToken ok:

But in the console we see the following:

Looking further into the gateway call, it would appear it is an issue with the token:

The code we used for adding the parameters for the uploadcollection was:

			onChange: function(oEvent) {
				var oModel = this.getView().getModel();
				oModel.refreshSecurityToken();
				var oHeaders = oModel.oHeaders;
				var sToken = oHeaders['x-csrf-token'];
				var oUploadCollection = oEvent.getSource();
				var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({
					name: "x-csrf-token",
					value: sToken
				});
				oUploadCollection.addHeaderParameter(oCustomerHeaderToken);
			
			MessageToast.show("Event change triggered");
		},


		onStartUpload: function(oEvent) {
			var oUploadCollection = this.getView().byId("UploadCollection");
			var oTextArea = this.getView().byId("TextArea");
			var cFiles = oUploadCollection.getItems().length;
			var uploadInfo = "";


			oUploadCollection.upload();


/*			MessageToast.show("Method Upload is called (" + uploadInfo + ")");
			sap.m.MessageBox.information("Uploaded " + uploadInfo);*/
		},


		onBeforeUploadStarts: function(oEvent) {
			// Header Slug
			var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({
				name: "slug",
				value: oEvent.getParameter("fileName")
			});
			oEvent.getParameters().addHeaderParameter(oCustomerHeaderSlug);
			setTimeout(function() {
				MessageToast.show("Event beforeUploadStarts triggered");
			}, 4000);
		},

and we adjusted the code to accomodate the fileuploader as below:

			var oModel = this.getView().getModel();
			oModel.refreshSecurityToken();
			var oHeaders = oModel.oHeaders;
			var sToken = oHeaders['x-csrf-token'];
				var oCustomerHeaderToken = new sap.ui.unified.FileUploaderParameter({
				name: "x-csrf-token",
				value: sToken
			});


			oFileUploader.addHeaderParameter(oCustomerHeaderToken);
				var oCustomerHeaderSlug = new sap.ui.unified.FileUploaderParameter({
				name: "slug",
				value: oFileUploader.getProperty("value")
			});
			oFileUploader.addHeaderParameter(oCustomerHeaderSlug);


			oFileUploader.upload();
<br>

This seems to be correct according to other blogs and examples I've seen using the fileuploader.

Is there anything different we need to do regarding the token when we switch from uploadcollection to fileuploader? We are using 1.38.30 sapui5 libraries.

Accepted Solutions (0)

Answers (1)

Answers (1)

FRLEN
Participant
0 Kudos

I had a simular issue, we resolved this by using a Get Request.