Skip to Content
Author's profile photo Mauricio Lauffer

SAPUI5 – Upload file, “slug” with special characters

Hello guys!

I’m going to be short in this blog for I believe it can help a lot.

When uploading files using sap.m.UploadCollection component, if we need to pass aditional information it’s necessary to use a parameter called SLUG. To define this parameter value we use the component sap.m.UploadCollectionParameter.

The SLUG parameter is used to pass any sort of information, most used are: file name and some description about the file.

Exemple JS:


var oHeaderParameter = new sap.m.UploadCollectionParameter({
  name : "slug",
  value : sFilename + "|" + sFileDescription
});


Exemple XML:


<UploadCollection>
  <headerParameters>
       <UploadCollectionParameter name="slug" value="Filename.txt|Some Description" />
  </headerParameters>
</UploadCollection>


Lately I had some problems uploading files with the SLUG containing information with special characters. As in the exemple above, our app Fiori/UI5 needed to inform the file name and a description. Our customer was a Brazilian company, they always had some special character passed to the SLUG parameter.

Even with the application defined with codepage UTF-8  and SAP Gateway + ECC were unicode, the SLUG always came with error in the special characters.

Error exemple:

“Descrição” was shown as “Descri��o”.



To fix this error, I had to encode the SLUG value on client side and decode in the server side.


Encode – Client side (*.controller.js):


var oHeaderParameter = new sap.m.UploadCollectionParameter({
  name : "slug",
  value : encodeURIComponent( sFilename + "|" + sFileDescription )
});




Decode – Server side (SAP Gateway):


CLASS ZCL_xxxxx_DPC_EXT
METHOD /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM
lv_unescaped_val = cl_http_utility=>unescape_url( iv_slug ).



In the Fiori/UI5 application’s controller, the JavaScript function encodeURIComponent() is responsible for replacing the special characters in a string for the UTF-8 (unicode) representation.

In the SAP Gateway, the method CL_HTTP_UTILITY=>UNESCAPE_URL() is responsible to do the reverse process.

If we were using SAP Fiori with SAP HANA Cloud, we could use the JavaScript function decodeURIComponent() in the file .XSJS which receive the data from the app to decode the string.


Hope it help.

Thanks 😉

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Great job, Mauricio. Thanks for sharing!

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer
      Blog Post Author

      Thanks, Jaime!

      Author's profile photo Maurice Meurer
      Maurice Meurer

      Thank you for sharing.
      Just stumbled upon this issue in our current project and this solution works perfectly.

      Author's profile photo Former Member
      Former Member

       

      Author's profile photo Mark Van Reeth
      Mark Van Reeth

      Thanks, this solved my issue perfectly.

      Author's profile photo Gaurav Kashinath Pednekar
      Gaurav Kashinath Pednekar

      thanks. Helped a lot. But when I download the files the specials characters are converting back to #. How to fix it ? Any idea.

      Author's profile photo Arun Mathew K
      Arun Mathew K

      Thenks. Helped a lot...

      Author's profile photo Sven Schuberth
      Sven Schuberth

      Great work!

      I didn't need the server-side unescaping. Worked automatically...

      Author's profile photo Charles Richir
      Charles Richir

      fyi, server decoding remains needed in my case.

      Author's profile photo Charles Richir
      Charles Richir

      Complete and straight to the point. It helped a lot. Thank you