Skip to Content
Author's profile photo Former Member

Upload Image to SAP Gateway and Display Image in UI5 – Using New Fileuploader with SAP Gateway

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.

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Arindam Samanta
      Arindam Samanta

      Hi peter,

      Excellent stuff...Thanks for referring your stuff to me!!

      Regards,

      Arindam. 

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Arindam,

      you are welcome.

      Regards,

      Peter

      Author's profile photo Karthik Arjun
      Karthik Arjun

      Hi peter,

      Useful Blog.

      100 likes 🙂

      Thanks,

      Karthik

      Author's profile photo John Patterson
      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

      Author's profile photo S. Vikgnesh
      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi S.Vikgnesh,

      you should update toolkit, is there a problem with that?

      Regards,

      Peter

      Author's profile photo Ashwin Narayan
      Ashwin Narayan

      Hi Peter Marcely ,

           A very useful blog. Peter is there any way in Mobile application using sap.m...we can trigger an action to take pictures through camera and update the picture to the backend...

      Thanks,

      Ashwin

      Author's profile photo Former Member
      Former Member

      Hi Ashwin ,

      you might have to use phone Gap or Apache Cordova to use the camera.

      PhoneGap | Home

      cordova-plugin-camera/index.md at master · apache/cordova-plugin-camera · GitHub

      Cheers,

      Author's profile photo John Patterson
      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

      Author's profile photo Ashwin Narayan
      Ashwin Narayan

      Hey John,

      I will surely go through the same.

      Thanks,

      Ashwin

      Author's profile photo Former Member
      Former Member

      Hi Peter,

      What if I want to upload images in hana only as your code stores images in local folder.

      Regards,

      Upendra

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Michael Appleby
      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

      Author's profile photo Manoj Kumar
      Manoj Kumar

      Nice Blog

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Michael Appleby
      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

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Thanks for the advice. I have open a new discussion on this issue.

      Saving Signature Pad Image to SAP

      regards,

      Ishtiyaq

      Author's profile photo Hari Krishna Reddy P
      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

      Author's profile photo Michael Appleby
      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

      Author's profile photo Vivek Satavase
      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

      Author's profile photo Hari Krishna Reddy P
      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

      Author's profile photo Former Member
      Former Member

      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);
              },
          }); 
      
                    
      Author's profile photo Former Member
      Former Member

      Hi Peter,

       

      Thanks for the informative blog.

       

      We have used Fileuploader control of Unified library in one of the custom Fiori application. User attaches an image to the app with it. Control works well with Take Photo and Browse options of iOS to select and attach image but doesn't work with Photo library option and warns us to select only the file of the format jpg. Kindly suggest us a way to it as I do not find any existing information over  internet to fix it.

      Thank you,

      Suman