Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member194780
Active Participant


Hello Everyone,

In this blog let us see how we can bind dynamic images (i.e. based on user input) to SAPUI5 Image control.Let’s take an example of storing images of  100 employees and then displaying it as their profile pic based on employee id.

Firstly you need to process the cool images :smile: and store it in HANA!! Now how do we do that?? There are many ways to do this e.g. using  python,java,etc but I choose the JAVA way to store it as BLOB in HANA Table.. BLOB datatype can store images/audio/video up to 2GB.

Below is the code snippet for opening an image file, processing it and storing it in HANA table. Place all your image files in a folder(eg. C:\\Pictures).

 

public class ImageOnHana {
public static final String hanaURL = "jdbc:sap://<hostname>:3<instance>15/";
public static final String hanaUser = "AVIR11";
public static final String hanaPassword = "ABCD1234";
public static final String pics = "C:\\Pictures";
public static void main(String[] args) throws IOException, SQLException, ClassNotFoundException {
Class.forName("com.sap.db.jdbc.Driver");
Connection conn = DriverManager.getConnection(hanaURL,hanaUser,hanaPassword); //Open HDB Connection
conn.setAutoCommit(false);
String query = "INSERT INTO \"AVIR11\".\"EMP_IMAGES\" VALUES(?,?)";
PreparedStatement pstmt = conn.prepareStatement(query);
File folder = new File(pics);
File[] images = folder.listFiles();
System.out.println("*****OPEN FILES NOW****");
try {
if (images != null) {
for (File image : images) {
String imgName = image.getName();
FileInputStream fis = new FileInputStream(image);
pstmt = conn.prepareStatement(query);
String[] parts = imgName.toUpperCase().split(".JPG");
String id = parts[0];
pstmt.setInt(1, Integer.parseInt(id));
pstmt.setBinaryStream(2, fis, (int) image.length());
pstmt.executeUpdate();
conn.commit();
System.out.println(imgName + " image upload to HANA successful");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}




Row inserted  - “AVIR11”.”EMP_IMAGES”. Column IMAGE with BLOB datatype



For providing this image to the UI lets create a XSJS service that would process the blob data from table. Make sure that the content-type is set to image/jpg.

var empId = $.request.parameters.get("empId");
var conn = $.db.getConnection();
try {
var query = "SELECT IMAGE FROM \"AVIR11\".\"EMP_IMAGES\" WHERE ID = ?";
var pstmt = conn.prepareStatement(query);
pstmt.setInteger(1,parseInt(empId));
var rs = pstmt.executeQuery();
if(rs.next()){
$.response.headers.set("Content-Disposition", "Content-Disposition: attachment; filename=image.jpg");
$.response.contentType = 'image/jpg';
$.response.setBody(rs.getBlob(1));
}
} catch (e) {
}




conn.close();

Note : Odata does not support BLOB datatype, hence couldn't send the response in Odata.

Done!! We are good to go and integrate this service to the UI5 image control !!

<Image src="http://<hostname>:8000/avinash/services/XJ_Emp_Images.xsjs?empId=1"
width="100%" height="150px">
<layoutData><l:GridData span=”” linebreakL=””/></layoutData>
</Image>



Above view.xml snippet shows hardcoded/specific Employee ID. For dynamic Employee id set  <Image id=”image> and refer this id in your controller.xml for setting the source.

byId("image").setSrc("http://<hostname>:8000/avinash/services/XJ_Emp_Images.xsjs?empId="+employeeId+"");




Voilà my fav star pic for my Employee Id !!

If your scenario is to Upload a file from the UI using an Upload button you can use the SAPUI5 FileUploader control and use XSJS to get the entities :smile: The later processing and UI image binding remains the same as above..

 

Happy Learning !! :smile:

 

Avinash Raju

SAP HANA Consultant  



4 Comments
Labels in this area