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×tamp='+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+’×tamp='+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:
Comments
5 comments
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!
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.
how to upload the multiple files using salesforce? what will be the request body?
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
This worked good for me
Please sign in to leave a comment.