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 😉