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.

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.

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

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.