Skip to Content
avatar image
Former Member

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


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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    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" />
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 21, 2017 at 05:06 PM

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


    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    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,


    Add comment
    10|10000 characters needed characters exceeded