Lightning Aura Component

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


For file:upload

<aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg']" />
<lightning:fileUpload label="Attach receipt"

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

dont miss out iconDon'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">
            <tr class="slds-line-height_reset">
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Title">Title</div>
            <aura:iteration items="{!v.listContentDoc}" var="CD">
                    <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>

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}"
            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 class="slds-backdrop slds-backdrop_open"></div>
<!--###### FILE PREVIEW MODAL BOX END ######-->

dont miss out iconCheck out another amazing blog by Krati here: Send .csv File to Another Org in Salesforce


/**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);


Popular Salesforce Blogs