Skip to Content
0

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

Feb 20, 2017 at 02:02 PM

575

avatar image
Former Member

Hi,

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"});

oImage.setSrc("/sap/opu/odata/SAP/ZPROJECT_SHOPPING_CART_SRV/ProductimageSet('image.png')/$value");

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);

jQuery.ajax({

type: 'PUT', url:url1,

headers: oHeaders,

cache: false,

contentType: false,

processData: false,

data: file,

success:function(){alert('sucess')},

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

handleUploadComplete: function(oEvent) { var sResponse = oEvent.getParameter("response"); jQuery.sap.require("sap.m.MessageBox"); sap.m.MessageToast.show(sMsg);

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(""); }

else

{

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

}

}

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

avatar image
Former Member
Feb 20, 2017 at 04:49 PM
0

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.

	<Image
					src="{img>/products/pic1}"
					densityAware="false"
					width="{/imageWidth}" >
					<layoutData>
					<FlexItemData growFactor="1" />
					</layoutData>
				</Image>
Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Thank you sarah sir....

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

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

GET_STREAM

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

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

0
avatar image
Former Member
May 19, 2017 at 07:48 AM
0

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,

Alissa

Share
10 |10000 characters needed characters left characters exceeded