How to Upload and Show Images in Lightning Aura Component | Salesforce Developer Guide
In order to upload an image, you have two ways either use a standard file:upload or create a custom image file upload.
Using the standard file:upload
Component:
For file:upload
<aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg']" /> <lightning:fileUpload label="Attach receipt" name="fileUploader" multiple="false" accept="{!v.filetype}" recordId="{!v.CaseObj.Id}" onuploadfinished="{!c.handleUploadFinished}" />
In this example you can add only the image of type .png', '.jpg', '.jpeg as defined in the attribute.
This file:uplaod will automatically upload the image in the defined parent id.
Don't forget to check out: 5 Reasons Why You Should Say ‘YES’ to Salesforce Mobile App
After you have uploaded the image, if you are showing them inside the data table, then,
<div class="slds-border_right slds-border_left"> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> <thead> <tr class="slds-line-height_reset"> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate" title="Title">Title</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.listContentDoc}" var="CD"> <tr> <th scope="row"> <div class="slds-truncate" title="{!CD.Title}"> <!--store contentDocument Id in data-Id attribute--> <a onclick="{!c.getSelectedFile}" data-Id="{!CD.Id}">{!CD.Title}</a> </div> </th> </tr> </aura:iteration> </tbody> </table> </div>
On the file name click, you will them show the preview, which will be opened inside modal, for this, you have to use:
For file Preview:
<!--###### FILE PREVIEW MODAL BOX START ######--> <aura:if isTrue="{!v.hasModalOpen}"> <section onclick="{!c.closeModel}" role="dialog" aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <div class="slds-modal__content slds-p-around_medium slds-text-align_center" style="background: transparent;"> <div style="width: 50%; margin: 0 auto; text-align: left"> <!--<lightning:fileCard> to preview file using content document Id --> <lightning:fileCard fileId="{!v.selectedDocumentId}"/> </div> </div> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </aura:if> <!--###### FILE PREVIEW MODAL BOX END ######-->
Check out another amazing blog by Krati here: Send .csv File to Another Org in Salesforce
Controller:
/**Open image preview */ getSelectedFile : function(component,event,helper){ // display modle and set seletedDocumentId attribute with selected record Id component.set("v.hasModalOpen" , true); component.set("v.selectedDocumentId" , event.currentTarget.getAttribute("data-Id")); }, /**Close preview */ closeModel: function(component, event, helper) { // for Close Model, set the "hasModalOpen" attribute to "FALSE" component.set("v.hasModalOpen", false); component.set("v.selectedDocumentId" , null); },
Responses