Skip to Content

Attachment implementation in SAP UI5(CRM and SAP UI5 integration)

In this blog we will demonstrate how to send attachment from SAP UI5 front-end screen to back-end with ODATA.

I came across a requirement, where I have to design a custom FIORI like app. The app contains master and detail page, where master displays list of complaints from CRM and detail page contains the detail of selected complaint, detail includes, item and attachment and header data. The attachment should show in both CRM and well as SAP UI5, UI’s.


The solution shown below can be implemented in any CRM scenario where you require attachments (Attachment can be any type format).

ODATA Section:  As we knows that CRM attachment get stores in Content Server, so we need to read and write our attachment in content server. We are going to use cl_crm_documents class to achieve this functionality.

Below is the step you have to follow to achieve this functionality with ODATA.

1. Create a structure with attachment attribute.


2. Open transaction SEGW, and create entity with the above structure and generate the object.


3. Create another entity like in my case I have created complaint, see below screenshot, so totally there will be two entities.

     entity architecture.PNG

4. After that you have to select attachment entity type as media( click on Entity Type -> check media check box)

5.  To define mime type of attachment we need to redefine, define method of MPC_EXT class.



                          super->define( ).

                         data: lo_entity   type ref to /iwbep/if_mgw_odata_entity_typ,

                           lo_property type ref to /iwbep/if_mgw_odata_property.

                           lo_entity = model->get_entity_type( iv_entity_name = ‘Complain_Attachments’ ).

                          if lo_entity is bound.

                                lo_property = lo_entity->get_property( iv_property_name = ‘MimeType’ ).

                                lo_property->set_as_content_type( ).


6. After this we have to redefine create stream method of DPC_EXT class , which is the method to add attachment into the content server. See below code


(Please see attached file create_stream)

7. To read the attachment from content server we need to redefine the get_stream method of DPC_EXT class.


  (Please see attached file get_stream)

SAP UI5 Section: To implement the attachment functionality from front-end you have to follow below steps.

1. Write below code in XML vew.In XML view; if you are using IconTabFilter then paste this code inside it.  

<UploadCollection id=”UploadCollection”

maximumFilenameLength=”55″ multiple=”true” items=”{/results}”

showSeparators=”None” change=”handleChange” fileDeleted=”onFileDeleted”

fileRenamed=”onFileRenamed” fileSizeExceed=”onFileSizeExceed”

typeMissmatch=”onTypeMissmatch” uploadComplete=”onUploadComplete”>

<UploadCollectionItem documentId=”{Objid}” fileName=”{Name}” mimeType=”{MimeType}” thumbnailUrl=”{thumbnailUrl}”

url=”{                path: ‘Objid’,



enableDelete=”true”  enableEdit=”true”/>


Note: you have to do some modification accordingly.

Here I am creating UploadCollection for uploading multiple documents in SAP backend

2. Now write below code in controller of the view.


     We have to implemented onChange event of UploadCollection, this method is responsible to send your attachment into backend, in this method we are doing following things.

  1. 1. Getting ‘x-csrf-token’ from ajax request.
  2. 2. Setting Upload URL to upload collection.
  3. 3. Setting header for the request by adding UploadCollectionParameter.

After this method you will be able to see your attachment in CRM.

(Please see attached file onchange)

3. To read an attachment we have to write a formatter function which will get URL of particular attachment when you will click on file name.

Write below code in Formatter.js

formatter.Formatter = {


       getURL: function(value){

//Return url which is based on your parameters, in our case it is complaint id and values.

               return “<Server URL>/<Service Name>/Complain_AttachmentsSet(Class=’CRM_L_ORD’,Objtype=’L’,ComplaintId='” + lComplainId + “‘,Objid='”+ value +“‘)/$value”;



Please let me know if you are facing any issue in this code and also if you have any new idea reply on this.



You must be Logged on to comment or reply to a post.
  • Thank you Jay for useful info,

    I followed your steps but I'm facing a problem, getting 405 (Method Not Allowed) error when posting to the service using the upload URL, I added a break point in create stream method in DPC_EXT, but the request didn't reach it. Also, I'm confused why you are sending slug as a request header with file name twice "oEntry.NAME" and "oEvent.getParameter("mParameters").files[0].name" which is already assigned to "oEntry.NAME".

    FYI: The following code is missing in the onChange method:

    var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({

       name : "x-csrf-token",

       value : header_xcsrf_token

    Best Regards,

    • Hi Ahmed,

      In CRM ,when you are attaching any document , it will open a popup , which will show you file name and name and other parameter which requires to attach a file.

      Now here in below code i am trying to send these parameter as a slug, becuase in attachment you can send data with slug(hope this will clear why i am sending slug)

      Below code what i am doing i am assignign name in both parameter because while attaching from sap ui5 , i am not giving any popup like crm have(this is as per my requirement)

      oEntry.FILE_NAME = oEvent.getParameter("mParameters").files[0].name

      oEntry.NAME = oEvent.getParameter("mParameters").files[0].name

      so for below lines you can send oEntry.FILE_NAME instead of oEvent.getParameter("mParameters").files[0].name .

      var oCustomerHeaderSlug = new sap.m.UploadCollectionParameter({

                      name : "slug",

                      value : oEvent.getParameter("mParameters").files[0].name or   oEntry.FILE_NAME





                     var oCustomerHeaderSlug3 = new sap.m.UploadCollectionParameter({

                      name : "slug",

                      value : oEntry.NAME



      yes below code is slipped out ,sorry please add this in begining.

        var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({

               name : "x-csrf-token",

               value : header_xcsrf_token


      Also if you are still facing issue please let me know , above code is tested and workign parfectly for me 🙂

      • Thank you for fast response, now it's clear. Do you know why I'm getting this error 405 (Method Not Allowed) as I mentioned in my post above.


        • Hi Ahmed,

          Please let me know where are you getting this error means are you getting this error in back-end or front-end, please give me the code what are u trying to achieve.



  • Hi Jay,

    How did you send both the complain_attachments and complaint to the back-end? In my case I had application and application_attachments. I created an new entry for the application and sent it to the back-end using submitChanges method of the odatamodel and called uploadCollection.upload() on the success method of the submitChanges but the attachments don't get uploaded in this way, they only get uploaded when I call upload() method by itself on a separate method and this necessitates having two buttons for submitting the attachments and submitting the application.

      • Hello Jay,

        I have implemented get_Stream and update_stream in DPC class.

        in ui5 i have upload collection and have implemented change() method.

        I set the uploadUrl and the parameter slug then i called upload() method of the uploadcollection.

        I ui5 the busy indicator never stops and there is a message wait for server to respond. Even update_stream is not getting called.

        I debugged further to FileUploader.js and found that the InstantUpload should be set to false.

        FileUploader.js Code :

        h.prototype.upload = function() {

                if (this.getInstantUpload()) {

          "Not a valid API call. 'instantUpload' should be set to 'false'.");


                var e = this._aFileUploadersForPendingUpload.length;

                for (var i = 0; i < e; i++) {

                    this._iUploadStartCallCounter = 0;




        I made InstantUpload to false but still gatway is not getting hit.

        Please guide me how to upload files.



  • Hello Former Member,

    I have issue when reading file from content server in CRM integrating with SAP UI5. I'm interested in your solution here. But I couldn't see your attachments on this post. Could you please reupload it?

    Thank you.

  • Hello Former Member,

    Somehow the attachments in your blog are not visible now. For point 6 and 7, only "(Please see attached file create_stream)" this message is visible. Could you please add the attachments again.





    Hello Former Member,

    Attachment is not available. Could you please share to Please.




  • Hi Jay Prakash,


    I am implementing UploadCollection UI element but some how when I am trying to upload the file, it is not calling CREATE_STREAM method in DPC_EXT class.

    Couple of points:

    1. I am setting the value of uploadURL property of UI element while defining it in XML view i.e. uploadUrl=”/sap/opu/odata/sap/ZPROJ_DNT_ATTACHMENT_SRV/ZENT_ATTACHMNT_DETSet”
    2. What should be the value of InstandUpload parameter?
    3. Is defining Items while defining the UI element necessary?
    4. While trying to upload I get the error "File Upload Failed:  Unable to get property '0' of undefined or null reference - "