Image Uploader: An Amazing Lightning Component

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.