Skip to Content

Upload image to SAP from SAPUI5 using oData

Feb 27, 2017 at 05:49 PM


avatar image

Hi to all,

i have created a small SAPUI5-Application where I can retrieve images from the Backend via oData-Service and show it in an sap.m.Image-Object.

My App is also able to get an image from the camera using the native plug-ins and show it in my Object.

Now my requirement is to send the captured image to SAP with an oData-Service. Can anyone provide me a small piece of code what I have to doe on the frontend? The backend is clear to me.

What I tried is the following:

                url : "/sap/opu/odata/sap/ZLAGER_USER_SRV/MaterialBilderSet",
                type : "POST",
                headers: {
                    slug: this.getView().byId("idMat").getValue(),
                    "x-csrf-token": "abcde"
                data : {
                    data : this.getView().byId("matImage").getSrc()
                success : function(data, textStatus) {
                error : function(data, textStatus) {
                    MessageBox.error(data.statusText, {
                        actions : [ MessageBox.Action.CLOSE ],

But without succes. I get an Error with "Forbidden" whenever i try to upload the Image.

Thanks a lot,


10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Mathias Koerner Mar 01, 2017 at 01:47 PM

Thanks Veera,

found it on my own.

I have created a similar solution as it is described in

Step 2. Seems to work.

10 |10000 characters needed characters left characters exceeded
Veeraraghavan Narasimhan
Feb 27, 2017 at 11:11 PM

Hello Mathias,

The token needs to be correctly passed. Was this fetched in the previous call? If you fetch the correct token provided by the oData service then it should work.

Thanks and Regards,


10 |10000 characters needed characters left characters exceeded
Mathias Koerner Feb 28, 2017 at 06:25 AM

Hi Veera,

thanks for your quick answer but I am a little bit confused. What is the token? And how can i fetch it?

For the capture of a photo i use this code:

            var oPlug =;
            var oImage = this.getView().byId("matImage");
            var that = this;
            oPlug.getPicture(function(imageData) {
                oImage.setSrc("data:image/jpeg;base64," + imageData);
            }, function(error) {
                MessageBox.error("Fehler: " + error);
            }, {
                quality : 50,
                destinationType : oPlug.DestinationType.DATA_URL,
                allowEdit : true,
                targetHeight : 200,
                targetWidth : 200,
                correctOrientation : true

I´m not sure how I can fetch any token here.



Show 1 Share
10 |10000 characters needed characters left characters exceeded