This is the documentation to create a lightning component to upload pictures to a standard salesforce object which in this particular case is the Products. The component displays the image of the product to be displayed in the quote line editor. This feature will be implemented using Base Lightning Components, client-side Javascript controller and a server-side Apex controller.
STEPS TO FOLLOW
1) Add two custom fields to the Products object
The first custom field is the Picture Path to store the location of the picture on the server and second custom field is the Picture, used to display the image of the product.
Picture Path Details :
- Data type: Text
- Field Label: Picture Path
- Length: 255
- Field Name: Picture_Path__c
- Picture Details:
- Data type: Formula
- Field Label: Picture
- Field Name: Picture__c
- Field Name: Picture_Path__c
- Formula Return Type: Text
- Formula: IMAGE(Picture_Path__c, “Product Image”, 100, 100)
2) Create the Image Uploader Lightning Component
<aura:component controller="AttachmentController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" > <!-- ATTRIBUTES --> <aura:attribute name="recordId" type="String" /> <!-- FILE UPLOAD LIGHTNING ATTRIBUTE TAG --> <lightning:fileUpload label="Upload Your Picture" name="fileUploader" multiple="true" accept=".pdf, .png, .jpg, .jpeg" recordId="{!v.recordId}" onuploadfinished="{!c.handleUploadFinished}" /> </aura:component>
3) Create a Server-Side Apex Controller
public class AttachmentController { @AuraEnabled public static void updatePicturePath(String recId){ //In lighting, the attachments are stored in content documents ContentDocumentLink docLink = [ SELECT ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId = :recId order by Id desc LIMIT 1]; //ContentVersion Id uniquely identifies the attachment ContentVersion version = [SELECT Id FROM ContentVersion WHERE ContentDocumentId = :docLink.ContentDocumentId]; //Update the Picture_Path field with the url of the image Product2 product = [SELECT Id FROM Product2 WHERE Id =:recId]; product.Picture_Path__c = '/sfc/servlet.shepherd/version/download/' + version.Id; upsert product; } }
4) Create a Client-Side Controller
({ handleUploadFinished : function(component, event, helper) { // Get the list of uploaded files var uploadedFiles = event.getParam('files'); //set action to call updatePicturePath method from Server-side controller var action = component.get('c.updatePicturePath'); //set parametrs action.setParams({ recId : component.get('v.recordId') }); action.setCallback(this, function(response){ var state = response.getState(); if(state === 'SUCCESS' || state === 'DRAFT') { var resultToast = $A.get("e.force:showTest"); resultToast.setParams({ "title" : "Success!", "message" : uploadedFiles.length + "file uploadedsuccessfully!" }); resultToast.fire();; } }); $A.enqueueAction(action); } })
5) Add the Component to your Product Detail Page
Now you can add this Image Uploader component on your Product page using the Lightning App Builder.
Article Categories:
Others