This is a step by step tutorial showing how to upload or transfer images to server from SAPUI5 Hybrid Mobile App.Iam uploading the image taken in the previous tutorial to a php server with the use of cordova File Transfer plugin.File Transfer plugin allows us to upload and download files.
This tutorial is continuation of How to implement Camera functionality in SAPUI5 hybrid mobile App?
Pre-requisites
Steps
This tutorial is continuation of How to implement Camera functionality in SAPUI5 hybrid mobile App?
Pre-requisites
- Windows system setup with SAP Mobile Platform SDK installed and Hybrid App Toolkit configured.(If not setup already visit my blog post Windows System Setup for Developing Mobile Apps with SAPWebIDE and SAP Mobile SDK )
- Created basic SAPUI5 Hybrid Mobile App(If you haven't created one yet follow previous blog How to Create SAPUI5 Hybrid Mobile App with SAP Web IDE).
- Device Camera functionality implemented already.(Visit blog post How to implement Camera functionality in SAPUI5 hybrid mobile App?)
Steps
- Start HAT Connector ,Open SAP Web IDE and check HAT connectity is avialable.If not familiar follow pre-requisites 2 section.
- Right click on project folder and choose Project Settings.Go to Hybrid App Toolkit->Hybrid App Configuration.Under Plugins section tick mark cordova Camera , Access File and File Transfer plugins and press save button.
- Open View1.view.xml file.Add a new sap.m.Button control.On clicking this button the image will be uploaded to php server.Add press event to the button.My modified view code below.
- Open View1.controller.js.Inside onUpload method will code upload logic.We will make use of upload method of File Transfer api.My controller code is below.Replace php url with your url.
- To test the App Right Click ->Run->Run on Local Device/Simulator->Android Device.
- See app screenshot below.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="myFirstMobileApp.view.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="CameraApp">
<content>
<HBox justifyContent="SpaceAround">
<items>
<Button text="Capture Photo" press="onCapture"></Button>
<Button text="Select Photo" press="onSelect"></Button>
</items>
</HBox>
<HBox width="100%" justifyContent="Center">
<items>
<Image width="300px" height="300px" id="myImage"></Image>
</items>
</HBox>
<HBox width="100%" justifyContent="Center">
<items>
<Button text="Upload Photo" press="onUpload"></Button>
</items>
</HBox>
</content>
</Page>
</core:View>
sap.ui.controller("myFirstMobileApp.view.View1", {
oView: null,
onInit: function() {
oView = this.getView();
},
onCapture: function() {
navigator.camera.getPicture(this.onSuccess, this.onFail, {
quality: 75,
targetWidth: 300,
targetHeight: 300,
sourceType: navigator.camera.PictureSourceType.CAMERA,
destinationType: navigator.camera.DestinationType.FILE_URI
});
},
onSelect: function() {
navigator.camera.getPicture(this.onSuccess, this.onFail, {
quality: 75,
targetWidth: 300,
targetHeight: 300,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: navigator.camera.DestinationType.FILE_URI
});
},
onSuccess: function(imageData) {
var imageId = oView.byId("myImage");
imageId.setSrc(imageData);
},
onFail: function(message) {
alert("Failed because: " + message);
},
onUpload:function(){
imageUri = oView.byId("myImage").getSrc();
alert(imageUri);
var url=encodeURI("");//you can add your php url here
var params = new Object();
params.your_param_name = "something"; //you can send additional info with the file
var options = new FileUploadOptions();
options.fileKey = "file"; //depends on the api
options.fileName = imageUri.substr(imageUri.lastIndexOf('/')+1);
options.mimeType = "image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = true; //this is important to send both data and files
var ft = new FileTransfer();
ft.upload(imageUri, url, this.onSuccesFileTransfer, this.onErrorFileTransfer, options);
},
onSuccesFileTransfer:function(success){
alert("success"+JSON.stringify(success));
},
onErrorFileTransfer:function(error){
alert("error"+JSON.stringify(error));
}
});
<?php
//Allow Headers
header('Access-Control-Allow-Origin: *');
//print_r(json_encode($_FILES));
$new_image_name = urldecode($_FILES["file"]["name"]).".jpg";
//Move your files into upload folder
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$new_image_name);
?>