Skip to Content

Updates

  • 23.07.2015
    • added SAP Note 2170724 to fix error when maintaining external aliases

Hi Everyone,

Use case: We need to upload the attachments from IE8/IE9 browser using SAP Gateway and SAPUI5. Many Enterprises still love to use legacy (old) browsers. 😆

/wp-content/uploads/2015/04/15_686856.png

So enabling these functionality becomes critical for companies without doing major browser upgrade. Let’s get started by discussing the scenarios and subsequently explaining the solutions involved.


Problem statement: SAPUI5 File uploader will work only with modern HTML5 browsers when using SAP Gateway as a backend to store files.

Issue: SAP Gateway OData service requires 2 custom headers to be set when handling attachment. (X-CSRF-Token and Slug). Only HTML5 compatible browsers will support setting these custom HTTP headers! In other words setting HTTP headers for a file upload request will not work in IE8 and IE9.


Solutions/Workarounds:

1.If you are using any Java server as frontend then below fix could be useful for you as suggested by W.Snoep ( Thank you Wim)

“Send parameters in the URL, and use the servlet to add the header parameters based on the URL parameters. The servlet already had the functionality of proxying but now also use it, to add the proper headers for slug and x-csrf/ x-requested-with header. This works and does add the file in the backend. However, since IE9 sends the file via an iframe as multipart/form data, it has extra header and footer data in the file in the backend. These need to be cut off in the backend ECC system. This functionality works smoothly now for IE9.

2.If we can’t solve using (1) then we can follow below approach. (When both our frontend & backend are SAP systems).

Create a custom handler to achieve this.This blog mainly focuses on this approach. Here are the steps involved.


The development activities for this scenario have been split into two steps:

  • Creation of custom handler – Setting up the Gateway environment (Steps covered in this blog)
  • Consuming the OData service from SAPUI5 application (Watch out for this in the next blog)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Creation of custom handler – Setting up the Gateway environment

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Action Items:


Client side (UI5 ver 1.22.4):

—————————————

– In the UI5 client, for IE8 and IE9, add the x-csrf-token and slug (if you need it) value as hidden input value to the upload form.  For newer browser (Chrome, IE10 etc.) , these values are added to the http request header.

– You can look up how to retrieve the upload form by looking at the upload method implementation for the FileUploader control in UI5 source code.

– For IE8 and IE9, set a different value (external alias defined below) for the uploadurl attribute of the fileuploader control.

Server side:

—————————————–

The problem for IE8 and IE9 is that the default handler class (/IWFND/CL_SODATA_HTTP_HANDLER) for ICF odata node only reads the x-csrf-token from the http header and it’s not possible to set http header in IE8 and IE9.  The idea is to create a custom handler to read the x-csrf-token from the post data and add it to the http request header and resume the normal request flow.

– Create a new custom handler class that implements the interface IF_HTTP_EXTENSION.  This handler will read the x-csrf-token (or whatever name you use for the hidden input field) and set it in the http request header

– Since we cannot modify the handler list for the odata node because it’s sap standard, we’ll add the custom handler to the handler list in our application node which we have control.  Add the default odata handler (/IWFND/CL_SODATA_HTTP_HANDLER) as the next handler in the list.

– Create an external alias for the new custom handler (e.g. customhandler).  This value is used as the value for the uploadurl attribute on fileuploader control (pre-pend and append the value with ‘/’, e.g. /customhandler/) before setting to uploadurl attribute.

Summary:

In IE8 and IE9, the fileuploader uploadurl will point directly to the application node and our custom handler will be processed before the default odata handler.  Our custom handler reads the x-csrf-token from the post data and sets it to the http request handler thus allowing the default odata handler to read it.


Let’s start with coding and configuration stuffs. Assume we have created an OData service to handle attachments. Please refer below blogs if you want to know more on this.

https://scn.sap.com/community/gateway/blog/2014/07/25/uploading-files-to-sap-gw-downloading-files-from-sap-gw–new-techniques

https://scn.sap.com/community/developer-center/front-end/blog/2014/07/28/upload-image-to-sap-gateway-and-display-image-in-ui5–using-new-fileuploader-with-sap-gateway

Once we are done with the service you can notice our service will have a corresponding entry in the ICF application. Go to TCode SICF and check as shown below.


/wp-content/uploads/2015/04/16_686857.png


Click on the above highlighted entry and you can see the handlers involved.

/wp-content/uploads/2015/04/1_686861.png

The above handler will check the consistency of the X-CSRF-Token at runtime when we upload a file.

/wp-content/uploads/2015/04/2_686862.png

Now we need to manually set the X-CSRF-Token by creating a custom handler.

This must implement the interface “IF_HTTP_EXTENSION” and write logic in the method “IF_HTTP_EXTENSION~HANDLE_REQUEST” This will read the x-csrf-token and set it in the http request header

/wp-content/uploads/2015/04/17_686864.png

/wp-content/uploads/2015/04/10_686866.png

Code:

  method IF_HTTP_EXTENSION~HANDLE_REQUEST.
DATA: token TYPE STRING,
slug
TYPE string.
*Read the Cross site forgetory token and Slug parameter from the POST data…
token
= server->request->GET_FORM_FIELD( name = ‘X-CSRF-Token’).
slug
= server->request->GET_FORM_FIELD( name = ‘Slug’).
server
->request->set_header_field( name = ‘X-CSRF-Token’ value = token ).
server
->request->set_header_field( name = ‘Slug’ value = slug ).
me
->if_http_extension~lifetime_rc = if_http_extension=>co_lifetime_keep.
*Add below code so that subsequent handlers are called for the application node
me
->if_http_extension~flow_rc     = if_http_extension=>CO_FLOW_OK_OTHERS_OPT.
endmethod.

After done with creation of custom handler then we need to assign this to our OData service in the SICF application node as shown here.

/wp-content/uploads/2015/04/3_686879.png

Create an external alias for the new custom handler. This value is used as the value for the uploadurl attribute on file uploader control in the SAPUI5 app.

/wp-content/uploads/2015/04/4_686880.png

Click “External Aliases” and create a new alias pointing to our OData service we created in the beginning.

/wp-content/uploads/2015/04/18_686881.png

Make sure you prepend the alias name with forward slash ‘/’ otherwise you might encounter some error. After successful assignment alias structure will be like below one.


/wp-content/uploads/2015/04/19_686882.png

When maintaining external alias if you get error “Service not found” implement below note to sort this out.

2170724 – Call of external aliases terminates with error text “Service not found”


Test the alias:

http://abc.com:8030/customhandler/

/wp-content/uploads/2015/04/20_686982.png

Testing the application:

For testing purposes I am using Google chrome to simulate IE behavior and check whether our OData service is working by passing data in URL headers. (Instead of passing in HTTP headers).


Get the X-CSRF-Token first:

http://abc.com:8030/customhandler/FileDetailSet?X-CSRF-Token=Fetch

/wp-content/uploads/2015/04/6_686884.png


Now get the token from the above request and pass them as URL parameter. Do not pass them in HTTP header .Use below URL to POST data to the server. Also attach the file which you want to upload. So our request should look similar to this.

http://abc.com:8030/customhandler/FileDetailSet?X-CSRF-Token=7Hsfl6bEdEsL64blrqByRQ==&Slug=JAVA|Application/MSWORD|797979


Ensure we call in the below format:

http://hostname:port/AliasName/EntitySetname?X-CSRF-Token=sslgjsdljg&Slug=TestFile

AliasName – External Alias which we created pointing to OData service

EntitySetname – OData service Entity which handle media stream. In our case it is ‘FileDetailSet’

Slug – This can be used to pass File name, File type, File length etc.


Once we hit “Send “we can see below how the flow will happen in ABAP system.

/wp-content/uploads/2015/04/8_686891.png


/wp-content/uploads/2015/04/9_686892.png

Set the HTTP header manually in our custom handler which will be triggered first before calling OData handler.

/wp-content/uploads/2015/04/10_686866.png

As a next step our OData handler will be triggered. We can verify whether it is validated correctly in the Gateway framework as shown below (Flag set to X).

/wp-content/uploads/2015/04/11_686897.png

/wp-content/uploads/2015/04/12_686898.png

Finally we can see our create stream method is triggered. /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM

File content and Slug parameters are retrieved successfully within the Gateway framework.

/wp-content/uploads/2015/04/13_686899.png

/wp-content/uploads/2015/04/14_686903.png


Many Thanks to Andrew Ng for proposing this solution which motivated me to write up this as a blog. In my next follow up I will illustrate how we can integrate this to a SAPUI5 app and execute this from a MSIE (IE9) browser.


References:

http://scn.sap.com/thread/3386003

http://scn.sap.com/community/mobile/blog/2012/07/22/html5-mobile-with-sap–a-lot-easier-than-you-think-part-ii

http://scn.sap.com/people/brian.mckellar

http://scn.sap.com/community/gateway/blog/2014/02/28/gateway-the-icf-and-solving-the-same-origin-policy

http://scn.sap.com/community/web-dynpro-abap/blog/2013/08/10/how-to-find-the-implementation-of-an-icf-service

http://www.cnet.com/news/what-browser-wars-the-enterprise-still-loves-ie-6/

https://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0

http://scn.sap.com/community/developer-center/front-end


Thanks for reading this. Appreciate your feedback ! Also please hit “Like” if you like the blog post.


Cheers

Prabaharan Asokan

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

    1. Prabaharan Asokan Post author

      Thank you chandra.

      Could you please help me in sharing this blog to SAPUI5 forum ? I believe this could be helpful to SAPUI5 community as well. Thanks for the help.

      — Prabaharan Asokan

      (0) 
  1. W. Snoep

    hi Prabaharan,

    Nice you wrote your findings down into this blog.

    Regarding solution 1. This is actually also using SAP for frontend and backend. Only in this case we have a SAP Java stack as intermediate proxy, and fixed the issue here.

    Regarding solution 2. Nicely written down. Another way of doing the same: transforming parameters into headers because of the iframe fallback. Don’t you have the issue of extra headers and footers in your file content because of multipart data?

    Thanks,

    Wim

    (0) 
    1. Prabaharan Asokan Post author

      Hi Wim,

      Thank you for the appreciation and comments. I am still working in SAPUI5 part. Once I am done with it I will let you know the details.

      Regards

      Prabaharan Asokan

      (0) 
      1. Olivia Suarez

        Hi,

        Were you able to remove the header and footer from the attachment content? Please share your findings and resolution.

        Thanks.

        (0) 
          1. Olivia Suarez

            Hi Prabaharan,

            Just to share:

            1. I raised a message to SAP with the statement/question:

                 “The issue is that when using sap.ui.commons.fileuploader in IE9, the attachment content contains header and footer. The header and footer gets uploaded as part of the file resulting to extra characters when the file is downloaded. Is there a standard solution to attach file in IE9 using UI5?”

                 And the reply I got was:

                 “As Internet Explorer cannot handle XHR requests it switches back to a form submit which has these generated header and footer parameters. Therefore Chrome and Firefox work fine and the issue only occurs in Internet Explorer 9 and below. So we can’t provide a better solution than what you already suggested.

            2. I found a solution to remove the header and footer characters from the attachment content by string and xstring manipulation. Here’s how I did it:

                 a. Convert XSTRING to STRING. The header will contain the text below. And I convert and cut the content value based on this.

                      content-disposition: formdata; name=“fileUploader”; ….

                     

                 b. Footer will also have “content-disposition: formdata” in the text. Look for this text in the XSTRING and split.

            (0) 
            1. Prabaharan Asokan Post author

              Hi Olivia,

              Could you please share your findings in UI5 as a blog( a humble request ) ? This would be useful to community members as well as me 🙂 . Also add the content to delete header & footer details.

              Regards

              Prabaharan Asokan

              (0) 
            2. Raj Govender

              Hi Olivia,

              I’m running into an issue when stripping out the header and footer, the file is getting corrupted when trying to run it after that process. This works fine for text and PDF documents but not MS Word, Excel, or images. Any other tips?

              Thanks in advance,

              Raj

              (0) 
  2. Raj Govender

    Hi Prabaharan,

    I’ve implemented it but getting the following error,

    ‘Unable to create attachment’



    I see an HTTP 400 error. I’m using the TaskProcessing service and Unified uploader.



    Regards,


    Raj

    (0) 

Leave a Reply