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 🙂 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

Blog_pic.jpg

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

Blog_pic2.jpg

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 🙂 The later processing and UI image binding remains the same as above..


Happy Learning !! 🙂


Avinash Raju

SAP HANA Consultant

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Mohamed Abdelhameed

    Hello Avinash,

    Thanks for the tutorial, can you please share a little more details about the implementation of the XSJS file, I have followed all of the steps above, but service does not seem to work properly.

    Thanks,

    M.Hisham

    (0) 
  2. Dharman Gouda

    Hi Avinash,

    I am able to store the data onto HANA DB but unable to view it on the page. I am getting place holder like below screenshot but image is not displaying.

    Kindly suggest.

    Regards,

    Dharman

    imagedisplay.JPG

    (0) 

Leave a Reply