PART-1: UI5 APP
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Image Upload & retrieval Solution</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.ui.unified.sample.FileUploaderComplex": "./", "sap.ui.demo.mock": "mockdata"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Image Upload & Retrieval through - Apache Olingo OData 2",
enableScrolling : true,
content: [ new sap.ui.core.ComponentContainer({
name : "sap.ui.unified.sample.FileUploaderComplex"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
index.html
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("sap.ui.unified.sample.FileUploaderComplex.Component", {
metadata : {
rootView : "sap.ui.unified.sample.FileUploaderComplex.View",
dependencies : {
libs : [
"sap.ui.unified"
]
},
includes : [
"../style.css"
],
config : {
sample : {
files : [
"View.view.xml",
"Controller.controller.js"
]
}
}
}
});
return Component;
});
component.js
sap.ui.define(['jquery.sap.global', 'sap/m/MessageToast', 'sap/ui/core/mvc/Controller'],
function(jQuery, MessageToast, Controller) {
"use strict";
var ControllerController = Controller.extend("sap.ui.unified.sample.FileUploaderComplex.Controller", {
imageId: 0,
fileData: null,
handleUploadComplete: function(oEvent) {
var sResponse = oEvent.mParameters;
if (sResponse) {
if (sResponse.status == 200) {
MessageToast.show("Done");
} else {
MessageToast.show("Failed");
}
}
sap.ui.core.BusyIndicator.hide();
},
handleUploadPress: function(oEvent) {
var ref = this;
ref.imageId = Math.floor(Math.random() * 1000);
$.ajax({
url: "/",
type: "GET",
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json",
"X-CSRF-Token": "Fetch"
},
dataType: "json",
async: false,
complete: function(data) {
$.ajax({
"url": "/sample.svc/v1/ImageStorages",
"data": JSON.stringify({
"ImageId": ref.imageId+"",
"ImageMimeType": "image/jpeg",
"ImageBinary": btoa(ref.fileData)
}),
"processData": false,
"headers": {
"X-Csrf-Token": data.getResponseHeader('X-Csrf-Token'),
"Content-Type": "application/json"
},
"method": "post"
})
}
})
},
handleTypeMissmatch: function(oEvent) {
var aFileTypes = oEvent.getSource().getFileType();
jQuery.each(aFileTypes, function(key, value) { aFileTypes[key] = "*." + value });
var sSupportedFileTypes = aFileTypes.join(", ");
MessageToast.show("The file type *." + oEvent.getParameter("fileType") +
" is not supported. Choose one of the following types: " +
sSupportedFileTypes);
},
handleValueChange: function(oEvent) {
var file = oEvent.getParameters().files[0];
var reader = new FileReader();
var ref = this;
reader.onload = function(readerEvt) {
ref.fileData = readerEvt.target.result;
//console.log(btoa(binaryString));
};
reader.readAsBinaryString(file)
MessageToast.show("Press 'Upload File' to upload file '" +
oEvent.getParameter("newValue") + "'");
},
handleLoadPress: function(oEvent) {
var img = this.byId("img");
var imgId = this.imageId+"";
$.get("/sample.svc/v1/ImageStorages('"+imgId+"')?$format=json",function(data){
img.setSrc("data:image/jpg;base64,"+data.d.ImageBinary)
})
}
});
return ControllerController;
});
Controller.control.js
<mvc:View controllerName="sap.ui.unified.sample.FileUploaderComplex.Controller"
xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" class="viewPadding">
<l:VerticalLayout>
<u:FileUploader id="fileUploader" name="file"
uploadUrl="/rest/api/v1/internal/uploadImage" width="400px"
tooltip="Upload your file to the local server" uploadComplete="handleUploadComplete"
change="handleValueChange" style="Emphasized" fileType="jpg"
placeholder="Choose a file for Upload...">
</u:FileUploader>
<Button text="Upload File" press="handleUploadPress" />
<Button text="Load File" press="handleLoadPress" />
<Image id="img" src="/" densityAware="false" width="500px" height="500px" ></Image>
</l:VerticalLayout>
</mvc:View>
View.view.xml
{
"welcomeFile": "index.html",
"logout": {
"logoutEndpoint": "/do/logout"
},
"routes": [
{
"source": "/sample.svc/v1/(.*)",
"destination": "java"
},
{
"source": "^/(.*)",
"localDir": "resources"
}
]
}
xs-app.json
PART-2: Java Services & Database
public class OnDBWriteContent implements OnJPAWriteContent {
final static Logger LOGGER = LoggerFactory.getLogger(OnDBWriteContent.class);
@Override
public Blob getJPABlob(byte[] binaryData) throws ODataJPARuntimeException {
try {
LOGGER.error("IN getJPABlob");
return new JDBCBlob(binaryData);
} catch (SerialException e) {
ODataJPARuntimeException.throwException(ODataJPARuntimeException.INNER_EXCEPTION, e);
} catch (SQLException e) {
ODataJPARuntimeException.throwException(ODataJPARuntimeException.INNER_EXCEPTION, e);
}
return null;
}
@Override
public Clob getJPAClob(char[] characterData) throws ODataJPARuntimeException {
try {
LOGGER.error("IN getJPAClob");
return new JDBCClob(new String(characterData));
} catch (SQLException e) {
ODataJPARuntimeException.throwException(ODataJPARuntimeException.INNER_EXCEPTION, e);
}
return null;
}
}
@Entity
@Table(name="\"com.sap.sample::IMAGE_MANAGEMENT.IMAGE_STORE\"")
public class ImageStorage implements Serializable{
private static final long serialVersionUID = 4829386985899147977L;
@Id
@Column(name="IMAGE_ID")
private String imageId = null;
@Lob
@Column(name = "IMAGE_BINARY", length=100000000)
private byte[] imageBinary = null;
@Column(name = "IMAGE_MIME_TYPE")
private String imageMimeType = null;
public String getImageId() {
return imageId;
}
public void setImageId(String imageId) {
this.imageId = imageId;
}
public String getImageMimeType() {
return imageMimeType;
}
public void setImageMimeType(String imageMimeType) {
this.imageMimeType = imageMimeType;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
public byte[] getImageBinary() {
return imageBinary;
}
public void setImageBinary(byte[] imageBinary) {
this.imageBinary = imageBinary;
}
setOnWriteJPAContent(onDBWriteContent);
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
19 | |
13 | |
13 | |
12 | |
10 | |
10 | |
9 | |
8 | |
8 |