Skip to Content
0

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

Feb 02 at 02:43 PM

118

avatar image

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.

stoekn.png (29.9 kB)
tokenconsole.png (33.7 kB)
tokenfailure.png (41.0 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

N. van Nieuwenhoven Apr 03 at 03:10 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded