Skip to Content

How to fetch image from odata to front end in sapui5?

Feb 20, 2017 at 02:02 PM


avatar image


I have already sent the images to odata gateway services using below code but, i want to fetch images from odata database to frontend(To display images in browser).

This is my code for view.js:

var oFileUploader = new sap.ui.unified.FileUploader({ id : "file1",

src:"sap/opu/odata/SAP/ZPROJECT_SHOPPING_CART_SRV/ProductimageSet/{Pfilename}/upload", uploadUrl:"upload/",

uploadComplete:"handleUploadComplete" });

var oButton = new sap.m.Button({ text : "Trigger", type:"{Pfilename}", press : oController.handleUploadPress });

var oImage = new sap.m.Image({width: "200px"});


Here if i add the images name from odata like image.png(Already exist images) it will display but i want to add the data base field name instead of add the image name. I want to add image field name like Pfilename(From odata).

var page1 = new sap.m.Page({ title: "Title", content: [oFileUploader, oButton, oImage ] });

return page1; }

This is for controller.js

onInit: function() {

var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/SAP/ZPROJECT_SHOPPING_CART_SRV",true,"username", "password");

sap.ui.getCore().setModel(oModel); },

handleUploadPress: function (oEvent) {

var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/SAP/ZPROJECT_SHOPPING_CART_SRV",true,"username", "password");

var csrf=oModel.getSecurityToken();

var up= sap.ui.getCore().byId("file1");

var flname=up.getValue(); var id=$(up).attr('sId'); var file=$("#"+id+"-fu")[0].files[0]; console.log(flname);

var url1="/sap/opu/odata/SAP/ZPROJECT_SHOPPING_CART_SRV/ProductimageSet('"+flname+"')/$value";

var oHeaders = { "x-csrf-token":csrf } console.log(oHeaders);


type: 'PUT', url:url1,

headers: oHeaders,

cache: false,

contentType: false,

processData: false,

data: file,


error:function(){alert('failed')} }); },

handleUploadComplete: function(oEvent) { var sResponse = oEvent.getParameter("response");"sap.m.MessageBox");;

if (sResponse)


var sMsg = ""; var m = /^\[(\d\d\d)\]:(.*)$/.exec(sResponse); if (m[1] == "200") { sMsg = "Return Code: " + m[1] + "\n" + m[2], "SUCCESS", "Upload Success"; oEvent.getSource().setValue(""); }



sMsg = "Return Code: " + m[1] + "\n" + m[2], "ERROR", "Upload Error"; }"sap.m.MessageBox");;



The images are successfully goes to odata data base but i want fetch images from odata database to frontend.If anybody knows please comment your answers.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Sarah Lottman
Feb 20, 2017 at 04:49 PM

To get the image from oData you must implement GET_STREAM method, this is for all media handling in Gateway.

On the UI side you use an image control, similar to the below. You can bind it directly to your model.

					width="{/imageWidth}" >
					<FlexItemData growFactor="1" />
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thank you sarah sir....

Sarah Lottman
Feb 21, 2017 at 05:06 PM

Sure, also look at this link for examples of GET_STREAM in ABAP.


Show 1 Share
10 |10000 characters needed characters left characters exceeded

Yes it is good....Thank you sarah sir.

Alissa Ryzhova
May 19, 2017 at 07:48 AM

Hi Kallesh,

did you manage it to fetch the image from odata to frontend? How? I have the same problem.

Thanks in advance and best regards,


10 |10000 characters needed characters left characters exceeded