Dynamically Open Salesforce Files or ContentDocument In Lightning Component

Hi guys today in this post we are going to learn, how we can open or display a preview of contentDocument or salesforce files dynamically in salesforce lightning component using <lightning:fileCard> base component. A <lightning:fileCard> component displays a preview of a file (Image, Text, PDF…etc.). On desktops, clicking the file preview opens the SVG file preview player, enabling you to preview images, documents, and other files in the browser. The file preview player provides quick access to file actions, such as upload, delete, download, and share. On mobile devices, clicking the file preview downloads the file. The file type determines the icon used on the file preview and caption area.

So In this post we will create a component to display list of all available salesforce files records and on clicking on the file title we will display a preview of file.

file in sfdc LC

Step 1. Apex Controller [fileViewerCtrl.apxc]

Step 2 : Lightning Component [filePreviewer.cmp]

JavaScript Controller : [filePreviewerController,js]

Opening the file preview player is supported in Lightning Experience, the Salesforce mobile web, and Lightning communities.

Steps To Add Lightning Components as Custom Tabs in a Lightning Experience App

Lightning Component Files Preview :

files in sfdc LC demo

Related Resources :

Other popular Post :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning ?

(Visited 19,063 times, 1 visits today)

21 thoughts on “Dynamically Open Salesforce Files or ContentDocument In Lightning Component”

  1. I am getting the follwoing error,while using the above code

    Action failed: forceContent:fileCard$controller$onRenditionLoaded [Cannot read property ‘fire’ of undefined] Failing descriptor: {forceContent:fileCard$controller$onRenditionLoaded}

    Can you let me know where did I went wrong .

  2. This component doesn’t open the files to see the content inside. I entirely copy pasted this code but it doesn’t function properly. Anyone having the same issue.

  3. Hello all

    Please replace getSelected method with this line of code. This Line of code open document in bigger screen.

    getSelected : function(component,event,helper){

    var fileid0 = event.currentTarget.getAttribute(“data-id”)
    recordIds: [event.currentTarget.getAttribute(“data-id”)]


    Thanks in advance


Leave a Comment