Upload Images from Tablet/Mobile to SAP - Part I

[karthikarjun]

Hi All,

Introduction:

A document management system (DMS) is a system (based on computer programs in the case of the management of digital documents) used to track and store documents. It is usually also capable of keeping track of the different versions modified by different users

Requirement:

In SAP QM and PM module have a requirement to create notification from mobile/tablet. Under created notification i have to attach notification images

( for ex:: i want to create one notification for damaged train track).

Technical Req:

1. CANVAS Tag from HTML5
2. File Transfer Plug-in
3. File Opener Plug-in

Methods:

1. UPLOAD document from Tablet/Mobile
2. Download document from SAP Server to SD Card

Code snippet:

1. Index Page:

2. Use below class to open Camera:

var Images = function(){};//Class

Images.prototype.getPhotoList(source,checkDes,ListId) {

navigator.camera.getPicture( function (imageData) {

var imageList = {

"imageData": "data:image/jpeg;base64," + imageData,

"imageName":checkDes

}

addImageToList(imageList,ListId);//Attach your image to List

}, onFail, { quality: 50,

destinationType: destinationType.DATA_URL,//File Url we can use

sourceType: source });

}

This function will add your clicked image to Noti list.

3. Upload Image to SAP:

    -Use canvas-to-blob.min.js this third-party JS file. it converts your image into blob.

    -NotificationNo - Get Notification number from GW Service response ( 200 Ok Response). Attach Notification response number to image slug.         

Because images have large number of bytes. It might be take some time to upload. So create a new QUEUE Logic for Notification images. Based on the status of queue, upload your file ( one by one ) to SAP system.//User Your own queue logic to upload image :razz: .

Images.prototype.convertToBLOB_and_UploadToSAP(NotificationNo,ImageDescription,MobKeyValue,addedImageSourcePath){

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var imageObj = new Image();

     imageObj.src = addedImageSourcePath;

     imageObj.onload = function() {

     ctx.drawImage(imageObj, 0, 0);

if (c.toBlob) {

c.toBlob(

function (blob) {

var reader = new FileReader();

reader.readAsArrayBuffer(blob); //array buffer

reader.onload = function (evt){

var oServiceURL = "proxy/sap/opu/odata/sap/ZGW_DO_APP_SRV";//Generic Service

var fileTarget = evt.target.result;

var SPath = "/DocSet";

var Header = {

headers: {

                   "x-csrf-token" : token1,

                   "Authorization" : "Basic cnRoYW5DDDDD",

                   "slug": MobKeyValue

             };

}

var UploadImg = new sap.ui.model.odata.ODataModel(oServiceURL);

UploadImg.setHeaders(Header );

UploadImg.attachMetadataFailed(function(){

             this.getEventBus().publish("Component", "MetadataFailed");

  },this);

UploadImg.create(SPath,fileTarget,function (oSuccess){

alert("Image Uploaded Successfully");

},function(Error){

alert("Error Due to Upload");

});

};

},

'image/jpeg'

);

}

};

}

SAP ECC System:

Go to CV04n Transaction-----Enter your Doc Number----Go to Doc Tab---Open your image :smile:

Thanks,

Karthik A