Hello folks,
I recently completed an interesting requirement and wanted to share the following information with you.
Requirement: The object record should have a detail page button, and the user should be able to upload the image file to that record. The uploaded image file should appear on the record details page.
Solution: I created a visualforce page where the user can upload an image to Salesforce’s content file system. The main goal now is to display the uploaded image file on the record detail page. I did this by creating a rich text field and inserting a file download URL in the tag.
Q. Where we can find the ‘ContentDownloadUrl ‘ after file upload?
Ans- The ContentDistribution: Represents information about sharing a document externally. We need to insert the ContentDistribution object record after ContentVersion insertion. You will receive the ‘ContentDownloadUrl’ for that file after inserting the CD (ContentDistribution) record. More information about ContentDistribution can be found in the Salesforce doc here.
Create a detail page button on the Account object, as shown below:
Find the VF and Apex code for this implementation below:
Visualforce 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"> | |
| <html> | |
| <head> | |
| <apex:slds /> | |
| <style> | |
| .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); | |
| } | |
| #bodyPart{ | |
| border: 1px solid rgb(221, 219, 218); | |
| padding:1rem 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <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> | |
| </div> | |
| </div> | |
| <div id="bodyPart"> | |
| <apex:inputFile value="{!imageFile}" styleClass="" /> | |
| <apex:actionRegion > | |
| <apex:commandButton value="Upload" action="{!uploadImg}" Styleclass="slds-button slds-button--brand" /> | |
| </apex:actionRegion> | |
| </div> | |
| </div> | |
| </apex:form> | |
| </body> | |
| </html> | |
| </apex:page> |
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 | |
| 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 | |
| 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; | |
| } | |
| } |
Output:
Hope this blog post helps many.
Happy Coding… 🙂
