Lightning:FileUpload and Lightning:FileCard base components

by | Sep 2, 2018 | Lightning | 2 comments

In this post I am gonna show how to use  lightning:fileUpload and lightning:fileCard base components from Salesforce. Both these components involve the use of files. In the above video I have demonstrated how I have built on the existing functionality of the Sample Student App to include file upload and file preview features as well.

I have dragged all these components in a lightning page for this demo for the sole reason that lightning:fileUpload component doesn’t work with lightning out or any standalone app.

So this demo consists of 3 different components. Two of them have already been discussed in the previous posts. Today we will focus on the third component SampleFilePreview and also see a few changes that I had to make in the StudentList component so that it works seamlessly with the current component. So lets have a look at the SampleFilePreview component.  

Here we can see, I have implemented the interface flexipage:availableForAllPageTypes because I am using this component in a lightning record page. So in order to be able to include this component in the lightning page from the App Builder, this interface needs to be implemented else it won’t show up in the app builder. Here I have used two attributes

These attributes are for recordId and fileIds respectively. recordId is being used in the file upload component. Without a valid recordId the file upload component remains disabled by default. Here the recordId doesn’t have any value to begin with and hence it would appear disabled. fileIds attribute is a List which stores the documentIds of the uploaded files. It is also bound to the lightning:fileCard component so that the uploaded files have an instant thumbnail generated. The SampleFilePreview component receives the recordId from the StudentList component via an application event c:enableFileUpload which contains a payLoad of the student recordId. As soon as this event is handled by the SampleFilePreview component and the recordId is set, the file upload becomes enabled. This happens in the JS controller in the setRecordId method. Lets have a look.

Lets also have a look at the custom application event that I made for passing the studentId. I will elaborate on types of events in a later post. Wait for it.

The first method in the JS controller file handleUploadFinished merely handles the uploadFinished event. One the file upload is finished this method is called. Inside this method we are extracting the file information from the event parameters and storing the fileId in the fileIds List so that it can be used to populate the file preview. Now let’s have a look at the changes I made in the StudentList component.

 

I have registered the event enableFileUpload so that I can fire it later from the JS controller. A custom event needs to be registered in the markup before it can be fired. I have also added these attributes in the lightning data table so that on selecting a record, the recordId will be passed via the above mentioned event. 

hideCheckboxColumn=”false” maxRowSelection=”1″ onrowselection=”{!c.enableFileUpload}”

Now lets have a look at the JS controller from where I am firing the event to pass the recordId.  


So this method essentially gets the selected record from the record selection event of the lightning data table. Then the Id of the student is extracted and wrapped in our custom event and fired so that the SampleFilePreview component can handle it and enable the file upload component. That’s how you implement this functionality. For any questions or if you have a doubt or a feedback, please do comment below or reach out to me via the contact form in the author page. In my next post I will talk about Lightning Data Service.
Bishwambhar Sen
Bishwambhar Sen is an IT professional with over 10 years of industry experience. He is a Salesforce certified developer and admin. When he is not configuring and customising, he loves photography, traveling and blogging.
Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This