Preview Files in Lightning Aura Components

In this post, we will implement the functionality to preview files in Lightning Aura Component using lightning:fileCard and custom implementation. Let’s get into the implementation.

Implementation

In this implementation, we will create a Lightning Aura Component to display and preview images.

Create a Lightning Aura Component and lightning:fileCard which accepts two arguments:

  • fileId: Id of the File to preview. [Required]
  • description: Description of the File. [Optional]
  • hideDescription: To hide the description. [Required]

PreviewFIle.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Preview File in Lightning Aura">
    	<div class="slds-p-around_small">
            <p>Click on the File below to Preview:</p>
            <br/>
            <lightning:fileCard fileId="0692x0000040AA9" description="Pitbull"/>
        </div>
    </lightning:card>
</aura:component>

This is enough to preview files in Lightning Aura Components.

This is how how our component will look:

Preview Files in Lightning Aura Components
Preview Files in Lightning Aura Components

After clicking on Image, SVG File Preview Player will open with some standard buttons like Download, Share.

File Preview in Lightning Aura Components
File Preview using lightning:filePreview

Preview File in Lightning Aura Components

If you don’t want to use lightning:filePreview, we can use Application Event to implement the Preview File functionality.

To implement this, we will make use of lightning:pill tag. It displays a label that can contain links and it can also be removed from the view. We will use this to preview the file.

Add lightning:pill in our component with below attributes:

  • label: The label for the pill.
  • name: It can be anything,but we will provide the Id of the File to preview.
  • onclick: Controller method to call once the user clicks on the pill.

We will use aura:set the tag to set the media attribute for the pill to display an icon for the file.

PreviewFile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	<lightning:card title="Preview File in Lightning Aura">
    	<div class="slds-p-around_small">
            <p>Click on the File below to Preview:</p>
            <br/>
            <lightning:fileCard fileId="0692x0000040AA9" description="Pitbull"/>
            <br/>
            <p>Click below to Preview: </p> <br/>
            <lightning:pill label="Labrador" name="0692x0000040AA8" onclick="{!c.previewFile}">
                <aura:set attribute="media">
                    <lightning:icon iconName="utility:file"  alternativeText="Labrador Image"/>
                </aura:set>
            </lightning:pill>
        </div>
    </lightning:card>
</aura:component>

After clicking on a Pill, previewFile JS controller method is called that will fire lightning:openFiles Application event with the Id of Files to preview.

PreviewFileController.js

({
	previewFile : function(component, event, helper) {
		var idFile = event.getSource().get("v.name");
        var openPreview = $A.get('e.lightning:openFiles');
        openPreview.fire({
            recordIds: [idFile]
        });
	}
})

PreviewFile.css

.THIS .slds-pill{
    height: 30px;
    width: 120px;
    padding: 5px;
    cursor: pointer;
}

This is how it will look:

Preview File in Lightning Aura Components
File Preview in Lightning Aura Components

After clicking on the Pill Labrador, SVG File Preview Player will open.

Previw File Lightning
File Preview using Application Event

That is all from this post. If you don’t want to miss new implementations, please Subscribe here.

Below are some hand-picked implementations for you in Lightning:

If you want to know more about lightning:filePreview, you can check the official Salesforce documentation here.

See you in the next implementation.

Leave a Reply

Your email address will not be published. Required fields are marked *