Lightning: FileCard Component

The Lightning FileCard component allows users to preview images, documents, and other files whether on desktop or mobile interfaces. It integrates seamlessly with the Lightning app builder and any sObject (Account, Contact, Opportunity etc.) detail page, displaying all uploaded files. It is supported in the Lightning Experience, Salesforce Mobile Web and Lightning Communities.

Lightning FileCard displays a preview of the file. If you use this component on the desktop, and after clicking on files preview it opens the file in the SVG file preview player in lightning experience. This enables you to preview the image, document, and other files in the browser. If you are using this component on mobile and after clicking on the preview download the files.

This “FileCard” component can be added to the sObject (Account, Contact, Opportunity, etc.) detail page. This component will show all uploaded files with previews on the sObject records. You only need to use lightning app builder to add the component to the record page.

This component displays a preview of the uploaded file, allowing the user to quickly determine which file is being uploaded.

Displays a preview of an uploaded file.

Find the component code below:

FilesCardCmp

	<aura:component controller="FilesController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<aura:attribute name="recordId" type="string"/>
	<aura:attribute name="filesIds" type="list"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<div class="slds">
	<div class="slds-page-header">Uploaded Files</div>
	<lightning:layout multipleRows="true">
	<aura:iteration items="{!v.filesIds}" var="f">
	<lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
	<lightning:fileCard fileId="{!f.ContentDocumentId}" description="{!f.ContentDocument.title}"/>
	</lightning:layoutItem>
	</aura:iteration>
	</lightning:layout>
	</div>

	</aura:component>

view raw filesCard hosted with ❤ by GitHub

lightning:fileCard – Attributes

FilesCardController

	({
	doInit : function(component, event, helper) {
	var action = component.get("c.fetchFiles");

	action.setParams({
	"linkedRecId" : component.get("v.recordId")
	});

	action.setCallback(this,function(response){
	var state = response.getState();
	if(state == "SUCCESS"){
	var result = response.getReturnValue()
	component.set("v.filesIds",result);
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw filesCard Controller hosted with ❤ by GitHub

Apex Controller

	public class FilesController {

	@AuraEnabled
	public static List<ContentDocumentLink> fetchFiles(String linkedRecId){

	List<ContentDocumentLink> cdlList = [SELECT ContentDocumentId,ContentDocument.title FROM ContentDocumentLink WHERE LinkedEntityId =: linkedRecId];
	return cdlList;
	}

	}