Skip to Content
Author's profile photo Jalil Benthami

Step by Step on how to use the SAPUI5 file upload feature



This document will give you in details all the necessary steps (Backend and Frontend) to  use easily the file upload feature in your SAP SAPUI5 apps.


ABAP Back End preparation

Use the Data Dictionary tool (SE11) to prepare a new DD structure for the entity type to be created for uploading files

The Goal in the given example is to upload a file for workflow task and the workitem ID is used as one of the keys for the new file

Call the Gateway Services Builder (SEGW)


Create a new entity type that refers the dictionary structure created in step 1 and flag the media checkbox

Import the entity type properties from the dictionary structure if not done during entity type creation

Save and generate

Update the data model definition using the MPC_EXT generated class

Redefine the standard method called DEFINE as below to declare your mime type property as content type for the new entity. In this provided example the property is called “Mimetype”


Frontend preparation

XML fragment for uploading  your file

For reuse purposes, you can define a dialog in a XML fragment to be called from the view

Instantiating the XML fragment in the view (js) and closing the dialog


Code to POST the file binary content to back end

CREATE_STREAM method redefinition

After preparing all the frontend elements, you need to redefine the method CREATE_STREAM Of the generated class DPC_EXT

The above code will allow you to read the parameters sent in the request header (like workitemid in the provided example)

After you can decode the base64 content to a xstring data and handle your content as you wish . In the provided example, I am using a home made function to transform the base64 to a xstring to be stored in SAP DMS later.





Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Karthik Arjun
      Karthik Arjun

      Great, But we already have sap controls to upload file, I appreciate your idea. But I would be grateful if you could reuse the existing controls.

      Author's profile photo Valter Araújo
      Valter Araújo

      Great experience but I agree with Karthik, SAP Fiori Design Guidelines recommends this component since version 1.26:

      Author's profile photo Former Member
      Former Member

      This is actually reinventing in a typical way kudos for effort but not required.

      Author's profile photo Momen Allouh
      Momen Allouh

      That is what i was looking for, Thanks Jalil Benthami for this details.

      Because it is more easy to understand than the SAPUI5 sap.m.UploadCollection  which i faced a lot of issues with it specially when binding attachments and adding attachment to previous bounded ones and other issues.....

      So I just used a simple sap.m.List with custom list item template and binding my attachment model to it then I can add / remove / edit the model without missing up the UI . and a custom method for upload that use your simple organized ajax call.




      Author's profile photo SEMİH ÇAVKAÇTI

      Thanks Jalil Benthami,

      But I would like to ask something,

      In the final step, How can I upload the file in SAP DMS, after get the file as base64 ?

      Author's profile photo Former Member
      Former Member

      As i am new to sapui5 trying to upload a file from ui part.i follwed the blog still i am facing an issue.can anyone explain me why it is not working.

      var token;
      var Service1;
      var oView;
      var sFileName;
      var oAttachDataModel;
      ], function(Controller) {
      "use strict";

      return Controller.extend("namespace.controller.fileup_View1", {
      handleUploadPress: function(evnt) {
      var oFileUploader = this.byId("fileUploader");
      sFileName = oFileUploader.getValue();
      if (sFileName === "") {"Please select a File to Upload");

      } else {
      //"File selected");

      var oView = this.getView();
      var oUploader = oView.byId("fileUploader");
      var oFileUploader = this.getView().byId("fileUploader");

      var file = + "-fu").files[0];
      var base64_marker = "data:" + file.type + ";base64,";

      var filename =;

      var reader = new FileReader();
      //on load
      reader.onLoad = (function(file) {
      return function(evt) {
      //locate base64 content
      var base64Index = + base64_marker.lenght;
      // get base64 content
      var base64 =;
      var sTasksService = "'TextFileUpload')/$value";
      var sService2 = "";
      var oViewModel = oView.getModel();
      var oContext = oView.getBindingContext();
      var oTask = oViewModel.getProperty(oContext.getPath());
      var oDataModel = sap.ui.getCore.getModel();
      var sWorkitemId = JSON.stringify(oTask.wiId);
      var service_url = sService2;

      cache: false

      url: service_url,
      asyn: false,
      datatype: "json",
      cache: false,
      data: base64,
      type: "post",
      beforeSend: function(xhr) {
      xhr.setRequestHeader("x-csrf-Token", token);
      xhr.setRequestHeader("content-Type", file.type);
      xhr.setRequestHeader("slug", sFileName);
      xhr.setRequestHeader("WorkitemId", oTask.WiId);

      success: function(odata) {"file successfully uploaded");

      error: function(odata) {"file Upload error");


      // oView = this.getView();
      // oAttachDataModel = this.oDataModel;



      Author's profile photo Former Member
      Former Member

      Please supply the code for decoding base64 sir.

      Thank you in advance

      Author's profile photo sagar u
      sagar u

      Please provide the backend code for conversion of the 64bit encoded data to xstring and store it in database. /RUNUP/DECODEBASE64.