Lightning: FileCard Component

Displays a preview of an uploaded file.

banner_1

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 downloads the files.

I have implemented this “FileCard” component for the sObject (Account, Contact, Opportunity, etc) detail page. This component will show all the uploaded files (with preview) on the sObject records. You just need to add the component on the record page using lightning app builder.

This component shows the preview of the uploaded file, the user can easily figure out which file is uploaded.

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

attribute

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;
	}

	}