File Related List in Lightning Web Component

Files is the excellent and most robust way to manage and share files in Salesforce. Using files we can

• Upload any file
• Search Salesforce for Files
• Store files up to 10MB (2GB if uploaded through Chatter)
• Preview uploaded files
• Follow uploaded files
• Share with other group or user
• Share with external customers

Recently one of our telegram group member asked how we can create file related list in lightning web component. That component can be added in lightning web component when some customize page needed it.

As we need to show file detail in lightning data table, so we have to customize lightning data table component to show file preview when mouse is over table cell. To create a file related list in lightning web component, we need below steps.

1. Get list of all files for current records
2. Create Preview Component
3. Create Preview table cell component
4. Customize lightning-datatable component
5. Create generic dialog component to upload new file
6. Create List component to show files

Let us go each step one by one so that we will get complete detail of component creation.

1 . Get list of all files for current records

We have to first get all files of current record. This component can be used in any object record. It should get records based on that record id. We will use ContentDocumentLink object to show preview and ContentVersion to show different versions of selected file.

Wrapper class is created to share only required detail to lightning web component. Wrapper class is extended based on required detail.

2. Create Preview Component

Let us create lightning component which will show preview image of file. For this use case we need image element and lightning-card component. Download no preview image from here and upload as static resource nopreview.

3. Create Preview Table Cell Component

Now let us create datatable cell component to preview file content. This component will show anchor list to show hyperlink and when mouse is moved over link it will show preview box.

4. Customize lightning-datatable component

We have to customize lightning-datatable component so that it will show anchor link and file preview. We have to use component which is created in step3.

This is file structure for this component. preview.html is part of this component itself.

5. Create generic dialog component to upload new file

create a generic dialog box component. This component can be used to show content as dialog or confirmation box.

We have used slot in this component so that we can also add custom html code in that dialog component.

6. Create List component to show files

Now we are ready to merge those component in one component to show files list and upload new file/file version.

1. File list is created using getFilesList js function.
2. For new file upload, dialog component is used. File upload elements are added as slot in dialog component at runtime. handleUpload js method is used to handle this use case.
3. New version of file can be uploaded and stored using Lightning data service. handleUpload js method is used to handle this use case.
4. Deletion of file is also allowed based on confirmation. This functionality is also created using Lighting data service. deleteFiles js function will handle deletion of file.

Test Page:

References:

1. https://salesforcecodex.com/2020/04/extend-lightning-datatable-with-file-upload-element-in-lightning-web-component/
2. https://salesforcecodex.com/2019/10/show-image-in-lightning-web-component-data-table/
3. https://help.salesforce.com/articleView?id=collab_files_attach_records.htm&type=5