Extend lightning-datatable with file upload element in Lightning Web Component

Recently we got a requirement to show list of account for getting status of uploaded document. If document is already uploaded  then list will show ‘No action required’ otherwise it will show file upload control.

As per requirement we have to show list or table of records so we can extend standard lightning-datatable with conditional file upload control. Let us how we can extend lightning-datatable with file upload control.

There is another blog https://salesforcecodex.com/2019/10/show-image-in-lightning-web-component-data-table/ which show how to add image control in lightning-datatable.

We can use similar concept to add file upload control in lightning data table.

Steps for extending  lightning-datatable

1. Create component which show lightning-file-upload control
2. Extend lightning-datatable with above component
3. Use extended lightning-datatable to show requirement

1. Create component which show lightning-file-upload control

create LWC component which will show conditional lightning file upload. This condition is defined as @api property and its value is passed from lightning-datatable record. Basically we need to show file upload control for account which has not uploaded document. So we need current record’s document status.

2. Extend lightning-datatable with above component

Let us extend lightning-datatable so that it will add file upload control in one of column.  For extending any control we can use below code

FileUploadDataTable extends LightningDatatable

See comment in below code where we have created custom type from LightningDatatable.

 static customTypes = {   //it show that we are creating custom type
        fileUpload: {  // type of custom element
            template: documentUploadRender, // Which html will render
            typeAttributes: ['acceptedFileFormats','fileUploaded']  // attribute of custom type
        }
    };

3. Use extended lightning-datatable to show requirement

We have created new type by extending lightning-datatable. Let us see how we can use that component. For showing list in data table we have fetched account list.

public class AccountController{
    @AuraEnabled
    public static List<Account> getPendingAccounts() {
        return [SELECT Id,Name, AccountNumber,IsDocumentComplete__c from Account];
    }
}

We have custom element fileUpload in lightning-datatable.  We can add attribute which we have created in above step. We have to set value in fileUploaded attribute of custom type. we can set value like fileUploaded:{fieldName: ‘IsDocumentComplete__c’} in column list.

{ label: 'Documents Upload', type: 'fileUpload', fieldName: 'Id', typeAttributes: { acceptedFileFormats: '.jpg,.jpeg,.pdf,.png',fileUploaded:{fieldName: 'IsDocumentComplete__c'} } }

Let us show these records in new data table.

Demo Page:

Reference:

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

http://salesforcecodex.com/2019/10/show-image-in-lightning-web-component-data-table/

Related Posts:

Generic DataTable in Lightning Web Component

Single Row Selection in Lightning Datatable

Update:

Folder Structure for these components: