How to upload the images with zoom functionality in SAPUI5

Hi All,

Today In this blog post, I am going to explain how to upload the images and showing uploaded  images with zoom functionalities.

Let’s see how this can be achieved.

First, we need to login to the SAP Cloud Platform. After login, We have to create a new  project in SAP Web IDE.

Here we are creating a project with a project name “UploadImages” as shown below.

images.json

Now lets create an empty JSON structure as shown below.

{

	"Images": [

	]

}

Later we can use this model to store the file content of uploaded images, so that we can bind those images to the view.

view1.view.XML

<mvc:View controllerName="com.UploadImages.controller.View1" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"
	xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="Upload Images">
					<content>
						<u:FileUploader change="onUploadPress"  id="fileUploader"
							name="ImagesUpload" buttonOnly="true" buttonText="Browse"/>
						<l:Grid class="sapUiMediumMarginTop" content="{imagesModel>/Images}" defaultSpan="L3 M4 S12" id="imageGrid" vSpacing="0.5">
							<VBox height="">
								<layoutData>
									<l:GridData span="L3 M6 S12"/>
								</layoutData>
								<Image class="imgclass" height="135px" id="gridImagesId" press="onImageZoom" src="{imagesModel>Pic}" width="95%"></Image>
								<core:HTML
									content='&lt;div id="myModal" class="modal"&gt; &lt;span class="close"&gt;X&lt;/span&gt;&lt;img class="modal-content" id="img01"/&gt;&lt;div id="caption"&gt;&lt;/div&gt;&lt;/div&gt;'></core:HTML>
							</VBox>
						</l:Grid>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

View1.controller.js : 

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function (Controller,JSONModel) {
	"use strict";

	return Controller.extend("com.UploadImages.controller.View1", {
		onInit: function () {
                       
                       /* load images json structure using jQuery modulepath */
			var oModel = new JSONModel(jQuery.sap.getModulePath("com.UploadImages", "/model/images.json"));
			this.getView().setModel(oModel, "imagesModel");
		}
	});
});

Image Upload:

The below function will be triggered whenever user clicks on “Browse” button.

onUploadPress: function(oEvent) {

			var oModel = this.getView().getModel("imagesModel");
			var oData = oModel.getData();
				var f = oEvent.oSource.oFileUpload.files[0];
				var Path = URL.createObjectURL(f); 
				var obj = {
					"Name": f.name,
					"Pic": Path
				};
				oData.Images.push(obj);
				oModel.setData(oData);
			
		}

Once the file has been uploaded, we are updating images.json structure with the corresponding image name and its source path.

ZOOM Functionality:

This function will trigger whenever user clicks on anyone of the uploaded image.

	onImageZoom: function(oEventArgs) {

			var ImagePath = oEventArgs.getSource();
			var sourecepath = ImagePath.getSrc();
			var modal = document.getElementById("myModal");  // pass model id
			var modalImg = document.getElementById("img01");  //pass image id
			modal.style.display = "block";
			modalImg.src = sourecepath;
			modalImg.height = 500;
			modalImg.width = 100;
			var span = document.getElementsByClassName("close")[0];
			span.onclick = function() {
				modal.style.display = "none";
			};

		}

We can control the modal resolution by its height and width.

CSS

The below CSS is used for zooming in the image,

.sapUiMediumMarginTop.bgColour{
	 background-color: rgb(66, 179, 244) !important;
}
.buttonClass{
margin-left:330px !important;	
}
.imgclass {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  border: 2.5px solid black;
}

.imgclass:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 95%; 
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #FF0000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

The output as follows:

Now we can see the all uploaded images in a gallery mode. This is how it looks like after uploading the images as shown below

In the above gallery we have 3 images. suppose lets say we want see the second image with zoom effects whenever user clicks on it.

This is how we gonna display.

@image source : Rebekka D NickyPe

Conclusion:  By following the above approach we have successfully uploaded the images and we are able to show that particular image with zoom effects.

Thanks for Reading