SAP Mobile App Development

How to Upload Images to server in SAPUI5 Hybrid App?

                      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

  1. 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 )
  2. 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).
  3. Device Camera functionality implemented already.(Visit blog post How to implement Camera functionality in SAPUI5 hybrid mobile App?)
Steps

  1. Start HAT Connector ,Open SAP Web IDE and check HAT connectity is avialable.If not familiar follow pre-requisites 2 section.
  2. 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.
  3. 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.


  4. 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.


  5. To test the App Right Click ->Run->Run on Local Device/Simulator->Android Device.
  6. See app screenshot below.
NOTE:sample code inside php server is below.It is a rest supporting php url with post method.Dont forget to create a upload folder



If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon

2 comments :

  1. Very nice blog, where do we actually create the upload folder ? Inside xampp htdocs folder?

    ReplyDelete
    Replies
    1. Thank you Mafika.Iam not an expert in PHP.When I asked Our PHP Expert he recommended creating the folder inside the project folder.Of course it will be inside xampp htdocs folder.

      Delete

Powered by Blogger.