Rich text Area Image ajax fetch as blob

I am trying to access and image stored as rich text area in my product records. I am getting an anchor tag and after removing the escape sequences I am able to test the image URL in browser, and it works fine.

Now for my hybrid app i want to use this URL to download the image as blob with an ajax call. We are using forcetk so I wrote a custom forcetk meathod to fetch the image but it failed. Please not i am trying this through webkit and all requests are sent after login

 forcetk.Client.prototype.ajaxImage = function(url, callback, error) {
    //url: (this.proxyUrl !== null) ? this.proxyUrl: url,
    var that = this;
    //var url = this.instanceUrl + '/services/data' + path;
    //alert('..............url in tk ajax.................'+url);
    return $j.ajax({
                   type:  "GET",
                   async: this.asyncAjax,
                   url: url,
                   //contentType: 'application/json',
                   xhrFields: { responseType: "blob" },
                   cache: false,
                   processData: false,
                   data: {"oauth_token":that.sessionId},
                   success: callback,
                   error: (!this.refreshToken ) ? error : function(jqXHR, textStatus, errorThrown) {
                   if (jqXHR.status === 401) {
                   that.refreshAccessToken(function(oauthResponse) {
                                           that.setSessionToken(oauthResponse.access_token, null,
                                                                oauthResponse.instance_url);
                                           that.ajax(path, callback, error, method, payload, true);
                                           },
                                           error);
                   } else {
                   error(jqXHR, textStatus, errorThrown);
                   }
                   },
                   complete:function(){alert("complete")},
                   dataType: "json",
                   beforeSend: function(xhr) {
                   alert("befr send")
                   if (that.proxyUrl !== null) {
                   //xhr.setRequestHeader('SalesforceProxy-Endpoint', url);
                   }
                   xhr.setRequestHeader(that.authzHeader, "OAuth " + that.sessionId);
                   //xhr.setRequestHeader('X-User-Agent', 'salesforce-toolkit-rest-javascript/' + that.apiVersion);
                   }
                   });
}

and the response I am getting is :

{“readyState”:4,”responseText”:”\nif (window.location.replace){ \nwindow.location.replace(‘https://login.salesforce.com/?ec=302&startURL=%2Fcontent%2Fsession%3Furl%3Dhttps%253A%252F%252Fc.na15.content.force.com%252Fservlet%252FrtaImage%253Feid%253Da0Hi0000002K7eN%2526feoid%253D00Ni0000007Y4QS%2526refid%253D0EMi00000008TwH%2526%25255Bobject%25252520Object%25255D%2526_%253D1381467978037‘);\n} else {;\nwindow.location.href =’https://login.salesforce.com/?ec=302&startURL=%2Fcontent%2Fsession%3Furl%3Dhttps%253A%252F%252Fc.na15.content.force.com%252Fservlet%252FrtaImage%253Feid%253Da0Hi0000002K7eN%2526feoid%253D00Ni0000007Y4QS%2526refid%253D0EMi00000008TwH%2526%25255Bobject%25252520Object%25255D%2526_%253D1381467978037‘;\n} \n\n\r\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n”,”status”:200,”statusText”:”OK”}

Answer

When you successfully request the image URL via your web browser the browser is almost certainly also sending the Salesforce cookies from you current active session with the request.

Without those Salesforce will bounce you off to the login page and set the startURL query string parameter to the address you requested.

You will need to either authenticate the request for the image by including the required cookies or make the image publicly accessible.

Attribution
Source : Link , Question Author : sij , Answer Author : Daniel Ballinger

Leave a Comment