Skip to Content

 

Introduction

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.

 

 

 

 

To report this post you need to login first.

5 Comments

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

  1. Karthik A

    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.

    (2) 
  2. 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.

     

     

     

    (0) 
  3. vinayreddy salibindla

    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;
    sap.ui.define([
    “sap/ui/core/mvc/Controller”
    ], function(Controller) {
    “use strict”;

    return Controller.extend(“namespace.controller.fileup_View1”, {
    handleUploadPress: function(evnt) {
    //alert(“hello”);
    var oFileUploader = this.byId(“fileUploader”);
    sFileName = oFileUploader.getValue();
    if (sFileName === “”) {

    sap.m.MessageToast.show(“Please select a File to Upload”);
    return;

    } else {
    // sap.m.MessageToast.show(“File selected”);
    }

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

    var file = jQuery.sap.domById(oFileUploader.getId() + “-fu”).files[0];
    var base64_marker = “data:” + file.type + “;base64,”;

    var filename = file.name;

    var reader = new FileReader();
    //on load
    reader.onLoad = (function(file) {
    return function(evt) {
    //locate base64 content
    var base64Index = evt.target.result.indexOf(base64_marker) + base64_marker.lenght;
    // get base64 content
    var base64 = evt.target.result.substring(base64Index);
    var sTasksService = “http://sapserver2.us.xxxxxx.net.8001/sap/opu/odata/sap/ZOD_FILEATTACH_CRUD_SRV/fileSet(‘TextFileUpload’)/$value”;
    var sService2 = “http://sapserver2.us.xxxxxx.net.8001/sap/opu/odata/sap/ZOD_FILEATTACH_CRUD_SRV/ATTACHUPLOADSet”;
    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;

    $.ajaxsetup({
    cache: false
    });

    jQuery.ajax({
    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) {
    sap.m.MessageToast.show(“file successfully uploaded”);
    oFileUploader.setValue(“”);

    },
    error: function(odata) {
    sap.m.MessageToast.show(“file Upload error”);
    }

    });

    };
    })(file);
    reader.readAsDataURL(file);
    return;
    // oView = this.getView();
    // oAttachDataModel = this.oDataModel;
    }

    });

    });

    (0) 

Leave a Reply