Step by Step on how to use the SAPUI5 file upload feature
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.
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.
Great experience but I agree with Karthik, SAP Fiori Design Guidelines recommends this component since version 1.26: https://experience.sap.com/fiori-design-web/ui-components/upload-collection/
This is actually reinventing in a typical way kudos for effort but not required.
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.
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 ?
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;
}
});
});
Please supply the code for decoding base64 sir.
Thank you in advance
Please provide the backend code for conversion of the 64bit encoded data to xstring and store it in database. /RUNUP/DECODEBASE64.