How to Integrate Salesforce with Cloudinary?

Documented by Syed Ishaq.

 

1. Create a free plan account in cloudinary and save the following details :

i) Cloudname

ii) Apikey

iii) Apisecret

 2. Create a new remote setting record under name -> setup -> security controls -> Remote Site Settings with url as http://api.cloudinary.com/

 

Vf page code :

<apex:page controller="UploadPictureToCloudinaryController" showheader="false">
<apex:form id="AttachPicture">
<div style="width:500px;margin:0 auto;">
<apex:pageBlock mode="maindetail" title="Upload Image File to Cloudinary" >
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Upload" action="{!attachFile}"/>
</apex:pageBlockButtons>
Upload the Image<br/>
<apex:inputFile value="{!picture.body}" filename="{!picture.name}"/>
</apex:pageBlock>
<apex:pageBlock mode="maindetail" title="Uploaded Image" id="imageBlock">
<apex:image value="{!pictureurl}"/>
</apex:pageBlock>
</div>
</apex:form>
</apex:page>

Apex Controller:

public class UploadPictureToCloudinaryController{
public Attachment picture {get;set;}
public string dispresp{get;set;}
public string pictureurl{get;set;}
public UploadPictureToCloudinaryController(){
picture = new Attachment();
}
public PageReference attachFile(){

//specify the cloud name,apikey and apisecret
String cloudName=’’;
String apikey=’’;
String apisecret=’’;

/* upload image to cloudinary */
// Instantiate a new http object
Http h = new Http();
// Instantiate a new HTTP request, specify the method (POST) as well as the endpoint
HttpRequest req = new HttpRequest();
req.setEndpoint('http://api.cloudinary.com/v1_1/’+cloudname+’/image/upload');
req.setMethod('POST');

//base64encode picture body
String pictureString = EncodingUtil.base64Encode(picture.body);
//'UTF-8' encode
pictureString= EncodingUtil.urlEncode(pictureString, 'UTF-8');

String tiStmp=String.valueOf(System.NOW().getTime() / 1000);
String myData = 'public_id=CldinaryImg&timestamp='+tiStmp+apisecret;
Blob hash = Crypto.generateDigest('SHA1',Blob.valueOf(myData));
String hexDigest = EncodingUtil.convertToHex(hash);
String fileString = 'data:image/png;base64,';

String finalBodyString ='public_id=CldinaryImg&api_key=’+apikey+’&timestamp='+EncodingUtil.urlEncode(tiStmp, 'UTF-8')+'&signature='+EncodingUtil.urlEncode(hexDigest, 'UTF-8')+'&file='+EncodingUtil.urlEncode(fileString, 'UTF-8')+pictureString;

req.setBody(finalBodyString);
HttpResponse res = h.send(req);
parseJSON(res);
return null;
}

//method to parse json response from cloudinary and get url value of the image
public void parseJSON(HttpResponse respurl){
JSONParser parser = JSON.createParser(respurl.getBody());

while (parser.nextToken() != JSONToken.END_OBJECT) {
if (parser.getCurrentToken() == JSONToken.FIELD_NAME) {
String text = parser.getText();
parser.nextToken();
if (text == 'url') {
pictureurl = parser.getText();
break;
}
}
}
}
}

Screenshots:

Before:

before.jpg

 

After Upload:

after.jpg

Have more questions? Submit a request

Comments

  • Avatar
    James Gordon

    This code errors on line 31 when base64 encoding the file. Could someone update this to a working version?

    I'd also like to see a controller that retrieves images based on criteria such as folder.

    Thanks!

  • Avatar
    Roee Ben-Ari

    We currently don't have an official Salesforce integration library. While we encourage community contributed libraries (like the one you refer to), unfortunately, we're unable to offer support to it.
    You might want to consider contacting the library's developers.

  • Avatar
    sachin kadian

    how to upload the multiple files using salesforce? what will be the request body?

  • Avatar
    Richard Gieg

    Please note that if our jQuery library is used to upload, then multiple files can be selected and the uploads will be handled automatically. For more info about our jQuery SDK, please see: http://cloudinary.com/documentation/jquery_integration

Powered by Zendesk