How do I pass an Image in the body of a OData Request in SAPUI5?

Question

I need to pass an sap.m.Image file to the body(Data) of an OData request. Below is the code and I would like to know what to pass to the data parameter of the request so that my Image gets uploaded to the backend. When I pass the ImgValue which contains the dataurl it gives out an error saying

DOMException: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('d:0') contains the invalid name-start character

OData.request({
    requestUri: "http://ambrifiori.am.brothergroup.net:8081/sap/opu/odata/sap/ZPVSYSTEM_SRV/PromoImagesSet/",
    method: "POST",

    headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "application/atom+xml",
        "DataServiceVersion": "2.0",
        /*"Accept": "application/atom+xml,application/atomsvc+xml,application/xml",  */
        "X-CSRF-Token": header_xcsrf_token,
        "slug": "ajay122",
    },
    data: ImgValue,
});

[Encode your image binary to Base64 format](http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript), and add that string to the `data` property — Qualiture, Feb 25 '16 at 10:40
My ImgValue contains this value: data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7 Isn't that a base64 format? — Ajay Reddy, Feb 25 '16 at 12:09
You only need to submit the base64 data, ie the part after "data:image/gif;base64," — Qualiture, Feb 25 '16 at 12:22
So I don't have to use the link to convert my ImgValue to base64 correct? what I am saying is that my ImgValue already contains the above string before I used your solution above. So from what you are saying Ill have to just strip of the part "data:image/gif;base64," and 'POST' the image. But different images have different content that I am about to strip so how should I handle that? — Ajay Reddy, Feb 25 '16 at 12:32
You just need the already base64-encoded string part of the data URI for each of your images you want to process — Qualiture, Feb 25 '16 at 12:44

score 0 · Accepted Answer · answered Feb 25 '16 at 14:45

I wasn't able to post image data through OData hence I used ajax... This is what I did.

                OData.request 
            ({  
                requestUri:      "http://AMBRIFIORI.am.brothergroup.net:8081/sap/opu/odata/sap/ZUI5_DAILY_SALES_SRV/DailySalesSet",  
                method: "GET",  
                headers:  
                {       
                    "X-Requested-With": "XMLHttpRequest", 
                    "Content-Type": "application/atom+xml", 
                    "DataServiceVersion": "2.0",          
                    "X-CSRF-Token":"Fetch"                                 }                    
            },  
            function (data, response) 
            { 
                header_xcsrf_token = response.headers['x-csrf-token'];       
                csrftoken = header_xcsrf_token;

                $.ajax({
                      url: 'http://ambrifiori.am.brothergroup.net:8081/sap/opu/odata/sap/ZPVSYSTEM_SRV/PromoImagesSet/',
                      //dataType: 'json',
                      data: imgData,
                      //data: image,
                      type: 'POST',
                        headers: {   "X-Requested-With": "XMLHttpRequest",                        
                            "Content-Type": "image/png", 
                            "DataServiceVersion": "2.0",  
                            /*"Accept": "application/atom+xml,application/atomsvc+xml,application/xml",  */
                            "X-CSRF-Token": csrftoken, 
                            "slug": slug,
                            },                    
                      success: function(data) {
                          debugger;
                        console.log(data);
                        },
                            error: function(data) {
                                debugger;
                                console.log(data);
                            }
                      });

My ImgData consists of image in Data URI format base64. I just added one statement in my Imgvalue to convert it to ImgData which is

                var imgData = JSON.stringify(ImgValue);

How do I pass an Image in the body of a OData Request in SAPUI5?

1 Answers1