A blog about Salesforce CRM Configuration and development

Sunday, 17 March 2019

Show the uploaded image on the detail page.


I have recently worked on the interesting/good requirement and just want to share this with you:

Requirement: There should be a detail page button on object record and the user can upload the image file to that record. The uploaded image file should show on the record details page.

Solution: Created a visualforce page through which the user can upload the image in the content file system in Salesforce. Now the main thing is to show the uploaded image file on the record detail page. For that, I had created a rich text field and inserted file downloadable URL in the <image> tag.

Q. Where we can find the 'ContentDownloadUrl ' after file upload? 

Ans- The ContentDistribution object: (Represents information about sharing a document externally). We need to insert the ContentDistribution object record after ContentVersion insertionAfter CD (ContentDistribution) record insertion, you will get the 'ContentDownloadUrl' for that file. Find more information on ContentDistribution in Salesforce doc here.

Create a detail page button on the Account object like the screenshot below:

Visulforce page:
 <!-- Name: UploadImages  
    Decription: Upload images in files object and show them on richtex field on record.  
    Created Date: 17/03/2019  
    LastModified Date: 17/03/2019  
    Created By: Arun Kumar  
 <apex:page controller="uploadImageCntrl" sidebar="false">  
      <apex:slds />  
        .slds-scope .slds-page-header {  
         padding: 1rem 1rem;  
         /* border-bottom: 1px solid rgb(221, 219, 218); */  
         /* border-radius: .25rem; */  
         background: rgb(243, 242, 242);  
         background-clip: padding-box;  
         /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); */  
         border: 1px solid rgb(221, 219, 218);  
         border: 1px solid rgb(221, 219, 218);  
         padding:1rem 1rem;  
      <apex:form >  
      <div class="slds">  
        <div class="slds-grid">  
          <div class="slds-col slds-size--12-of-12">  
            <div class="slds-page-header">  
              Upload Image  
        <div id="bodyPart">  
          <apex:inputFile value="{!imageFile}" styleClass="" />  
          <apex:actionRegion >  
             <apex:commandButton value="Upload" action="{!uploadImg}" Styleclass="slds-button slds-button--brand" />  
Apex controller
 /* Name: uploadImageCntrl   
   Description: Upload files and show image in richtext field on object record page.  
   Created Date: 17/03/2019  
   LastModified Date: 17/03/2019  
   Created By: Arun Kumar  
 public with sharing class uploadImageCntrl {  
   public transient Blob imageFile{get;set;}  
   public string parentRecId ='';  
   public void uploadImageCntrl(){  
    public PageReference uploadImg() {  
     parentRecId = ApexPages.currentPage().getParameters().get('id');  
     system.debug('record id: ' +parentRecId );  
     ContentVersion conVer = new ContentVersion();  
     conVer.ContentLocation = 'S'; // S specify this document is in SF, use E for external files  
     conVer.Title = 'Test File';   
     conVer.PathOnClient = 'Test File';  
     conVer.VersionData = imageFile; //   
     insert conVer;  
     ContentVersion cv = [select id,ContentDocumentId from ContentVersion where id =: conVer.id];  
     //Create ContentDocumentLink  
     ContentDocumentLink cDe = new ContentDocumentLink();  
     cDe.ContentDocumentId = cv.contentDocumentId;  
     cDe.LinkedEntityId = parentRecId; // you can use objectId,GroupId etc  
     cDe.ShareType = 'V'; // Inferred permission, checkout description of ContentDocumentLink object for more details  
     //Insert content document link  
     insert cDe ;  
     //ContentDistribution: Represents information about sharing a document externally  
     ContentDistribution cd = new ContentDistribution();  
     cd.Name = 'Test File';  
     cd.ContentVersionId = conVer.Id;  
     insert cd;  
     ContentDistribution distribution = [select Name,ContentDownloadUrl from ContentDistribution where id=: cd.id];  
     Account acc = [select id,ARI__Images__c from Account where id=: parentRecId]; //ARI__Images__c (ARI__ is Namspace. it will be different in your case)   
     if(acc.ARI__Images__c == null){  
       acc.ARI__Images__c ='';  
     acc.ARI__Images__c += '<img src="'+distribution.ContentDownloadUrl+'" width="478" height="247">'+'</img><br/>';   
     update acc;  
     return null;  

Reference: https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_objects_contentdistribution.htm

Hope this blog post helps many.

Happy Coding... :)


  1. This comment has been removed by the author.

  2. i received this error can you help me ?

    Insert failed. First exception on row 0; first error: REQUIRED_FIELD_MISSING, Required fields are missing: [Version Data]: [Version Data]
    Error is in expression '{!uploadImg}' in component in page uploadimages: Class.uploadImageCntrl.uploadImg: line 15, column 1

    An unexpected error has occurred. Your development organization has been notified.


Trailhead Profile

Follow by Email

Total Pageviews


Popular Posts

Powered by Blogger.

Contact form


Email *

Message *