Skip to Content

I have prepared oData service that can handle uploading and downloading files using SAP gateway in blog post Uploading Files to SAP GW, Downloading Files from SAP GW – New Techniques. Based on this oData service, I created ui5 application that is described in this blog post.

Issues with Fileuploader and SAP gateway

There are few reasons why sap.ui.commons.fileuploader was not able to work with SAP gateway properly:

  • SAP Gateway could not receive multipart/form-data mime type as pointed out byJibin Joy in Re: File Attachment using gateway
  • Fileuploader could not send form data as AJAX call to send the form with different mimetype. Extending of Fileuploader was necessary to solve this issue as shown by John Patterson in Re: FileUploader and X-CSRF-Token?
  • When sending the post request to oData service, we also need to supply CSRF token to Gateway, what was not possible without extending Fileuploader.

Good news, bad news

As of openUI 1.21, sap.ui.commons.Fileuploader is deprecated and we should use sap.ui.unified.Fileuploader. Please refer to OpenUI5 SDK – Demo Kit. Good news are that there are built-in methods that can send file as AJAX call and also allows us to set header fields. Bad news are that it will still not work with IE8/9.

Implementing critical part in OpenUI5

I have prepared basic UI5 service that can manage (add, edit, delete) users. More details for this prerequisite is written in my blog post. Further, I will show how to extend this application with new options to upload Image for user and show the file in user’s card.

http://www.abap-developers.com/wp-content/uploads/2014/07/ui1.jpg

Uploading image via Fileuploader

  • We need to refresh CSRF token(line 5) and use it as a header parameter (line 14).
  • Set sendXHR parameter(line 11), which will make fileuploader send data as AJAX call
  • Set useMultipart(line 12) to false, mimetype of uploaded file will be send.
  • Set slug header parameter and fill it with filename so we can read it in Gateway (line 29)
    /*****   Upload dialog  *****/
    function openUploadDialog(user){
        var oUploadDialog = new sap.ui.commons.Dialog();
        oUploadDialog.setTitle("Upload photo");
        sap.ui.getCore().getModel().refreshSecurityToken();
        // prepare the FileUploader control
        var oFileUploader = new sap.ui.unified.FileUploader({
            uploadUrl : "your_service/UserSet('"+ user[0].getValue() +"')/Photo",
            name: "simpleUploader",
            uploadOnChange: false,
            sendXHR: true,
            useMultipart: false,
            headerParameters: [
                new sap.ui.unified.FileUploaderParameter({name: "x-csrf-token", value: sap.ui.getCore().getModel().getHeaders()['x-csrf-token'] }),   
            ],
            uploadComplete: function (oEvent) {
                var sResponse = oEvent.getParameter("response");
                if (sResponse) {
                    oUploadDialog.close();
                    sap.ui.commons.MessageBox.show("Return Code: " + sResponse, "Response", "Response");
                }
            }                   
        });
        // create a button to trigger the upload
        var oTriggerButton = new sap.ui.commons.Button({
             text:'Upload',
             press:function() {
                 // call the upload method
                 oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({name: "slug", value: oFileUploader.getValue() }));
                 oFileUploader.upload();
              }
         });
        oUploadDialog.addContent(oFileUploader);
        oUploadDialog.addContent()
        oUploadDialog.addContent(oTriggerButton);
        oUploadDialog.open();
   }

Displaying image in UI5

I have used Image element for displaying image. Just point source of the file to your Gateway are that’s it.

     var oImage = new sap.ui.commons.Image({width: "200px"});
     oImage.setSrc("your_service/UserPhotoSet('"+ user[0].getValue() +"')/$value");

Implemented application

You can find whole source code of my application in github – Upload Image in UI5. Backend part source codes are in document Code snippets for Uploading Files to SAP GW, Downloading Files from SAP GW – New Techniques.

When you select line with user and click on upload’s user photo button, you can send image to Gateway.

ui5-app1.JPG

When you select line with user and show his user card, you will see his photo:

ui5app-2.JPG

Open issue and conclusion

I did not proposed any workaround for IE8/9. But when I was implementing the application I noticed that in higher SP of SAP Gateway I could read the multipart/form-data mimetype in CREATE_STREAM method, request body was in value of media resource. Maybe it is possible to read and parse those data, we wouldn’t need even AJAX call for fileuploader. But this solution needs more research. I hope you enjoy this blog.

To report this post you need to login first.

22 Comments

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

  1. John Patterson

    Hi Peter

    Really happy that to see what you can achieve with the standard control now.

    Thanks also for pointing out that in newer versions of SAP Gateway you can read the form-data, will go back and look at this when i have time and see if the standard cannot be used to support browsers dont support the File API – IE9 and below.

    Cheers

    JSP

    (0) 
  2. S. Vikgnesh

    Hi Peter,

    I am using UI Development toolkit for HTML version 1.20.5 in eclipse kepler. Can you please guide how to use sap.ui.unified.FileUploader control in my eclipse version? Currently sap.ui.unified library is not available?

    Thanks & Regards,

    S.Vikgnesh

    (0) 
        1. John Patterson

          Hi Ashwin

          have a look at the FileUpload and UploadCollection controls (M and CA libraries), from memory when you use them in a Mobile or Tablet device the file picker gives the additional options of “Take Photo or Video”.

          Cheers

          JSP

          (0) 
  3. harshal gandhe

    Hi peter,

    Nice blog.

    What if i want to download any format of image inside my ui5 web application which was uploaded through file uploader. you have any idea about it ?

    Regards,

    Harshal

    (0) 
  4. Michael Appleby

    Hi Dhruv,

    Please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

    NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

    Thanks, Mike (Moderator)

    SAP Technology RIG

    (0) 
  5. ishtiyaq ahmed

    Hi Peter,

    Supurb blog, nicely documented.

    I am working on a scenario in which I have a signature pad control, I was trying to upload this signature image to oData service created in your example.

    How can i pass this signature image to odata which you have created instead of the image which we are uploading through UPLOAD USER PHOTO .

    appreciated you expert advice and guidance

    regards,

    Ishtiyaq

    (0) 
    1. Michael Appleby

      Please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
  6. Hari Krishna Reddy P

    Hi Peter,

    I have followed the same process as mentioned above.The slug parameter is empty in the CREATE_STREAM. Below is my code.

    oFileUploader.addHeaderParameter(new sap.ui.unified.FileUploaderParameter({

      name: “x-csrf-token”,

      value: this.oDataModel.getSecurityToken()

      }));

      oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({

      name: “slug”,

      value: “Slug Value”

      }));

      oFileUploader.setUploadUrl(oUrl);

    oFileUploader.setSendXHR(true);

      if (oFileUploader.getValue()) {

      oFileUploader.upload();

      }

    I am getting the data and everything works fine expect the slug parameter.

    In the CREATE_STREAM the IV_SLUG is coming empty and I have checked all the client headers with the below mentioned code.

    Still i didn’t find the slug parameter value. Same problem with the custom headers also

    DATA : lo_facade         TYPE REF TO /iwbep/if_mgw_dp_int_facade,

                lt_client_headers TYPE tihttpnvp.

         lo_facade    ?= /iwbep/if_mgw_conv_srv_runtime~get_dp_facade( ).

         lt_client_headers = lo_facade->get_request_header( ).


    i have checked the same thing(passed slug parameter in headers) from the gateway client it worked fine.


    Can you please help me to solve this issue?


    Request Header.PNG


    Thanks & Regards,

    Hari

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
    2. Vivek Satavase

      Hi Hari Krishna Reddy P

      Just replace below code :

      oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({

        name: “slug”,

        value: “Slug Value”

        }));

      By :

      oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({

        name: “slug”,

        value: oFileUploader.getValue()

        }));

      Thanks

      (0) 
      1. Hari Krishna Reddy P

        Hi Vivek,

        Thanks for the reply.

        My issue is solved in the Web IDE I need to maintain the below code in the neo-app.json.

        code: “headerWhiteList”:[“Slug”]

        Thanks & Regards,

        Hari

        (0) 
  7. Oscar Bermedo

    Hi Peter,

    Thanks for sharing this solution!

    Can you just advice how can we read the image using sap.ui.model.odata.v2.ODataModel?

    I am stuck trying to read an image from the gateway.

    If I run this uri directly in the SAP gateway it runs OK and the image data is read: /sap/opu/odata/sap/ZSA_USERS_SRV/UserPhotoSet(‘someone@gmail.com’)/$value”

    Now I want to read this image in my sapui5 application using the code below, but I just get the error “EventProvider sap.ui.model.odata.v2.ODataModel – No data was retrieved by service:”

    What am I missing here?

    var oModel = this.getOwnerComponent().getModel();
        oModel.read("/UserPhotoSet('someone@gmail.com')/$value", {
            success: function(oData, oResponse) {
                alert("Success read userphotto");
                img.setSrc(oData);
            },
        }); 
    
                                                
    (0) 

Leave a Reply