File upload functionality using Lightning Web Components.

Refence by 

RIJWAN MOHMMED

https://techdicer.com/upload-files-in-lightning-web-component-lwc-salesforce/

This is a Lightning Web Component (LWC) that displays a file upload form and a table that lists the files that have been uploaded. Here is a breakdown of the code:

• The template tag is the root element of the LWC's template.

• The lightning-card component creates a card container with a title of "File Uploade Using LWC".

• Inside the lightning-card, there is a div with a class of "slds-p-horizontal_x-small" that adds some horizontal padding.

• The lightning-layout component creates a grid layout with a single column.

• Inside the lightning-layout, there is a lightning-layout-item with a size of 12 that takes up the full width of the grid column.

• Inside the lightning-layout-item, there is a div with a class of "slds-p-left_medium" that adds some left padding.

• The lightning-file-upload component creates a file upload form with a label of "Upload Files". It has a name attribute of "fileUploader", an accept attribute that specifies the accepted file formats, a record-id attribute that specifies the ID of the record associated with the uploaded file, an onuploadfinished attribute that specifies the event handler for when the file upload is finished, and a multiple attribute that allows multiple files to be uploaded.

• After the lightning-layout, there is a br tag that adds a line break.

• Another lightning-layout component creates a grid layout with a single column.

• Inside the second lightning-layout, there is a lightning-layout-item with a size of 12 that takes up the full width of the grid column.

• Inside the second lightning-layout-item, there is a div with a class of "slds-p-left_medium" that adds some left padding.

• A h2 tag displays the text "Uploaded Files:".

• A table tag creates an HTML table with a class of "slds-table slds-table_cell-buffer slds-table_bordered" and an aria-label attribute that provides an accessibility label for the table.

• Inside the table, the thead tag creates the table header row.

• Inside the thead, a tr tag creates a row with a class of "slds-line-height_reset".

• Inside the tr, there are three th tags that define the columns of the table: "File Name", "File Type", and "File Size".

• Inside the tbody, a template tag creates a loop that iterates through each file in the lstAllFiles array and creates a row for each file in the table.

• Inside the loop, a tr tag creates a row with a class of "slds-hint-parent" and a key attribute that provides a unique identifier for the row.

• Inside the tr, there are three td tags that display the file name, file type, and file size for each file. The file data is accessed through the fileIterator variable, which represents the current file in the loop. The file data is obtained through the ContentDocument property of the file iterator. The file name, type, and size are displayed using expressions enclosed in curly braces. The lightning-icon component is used to display an icon for the file type.

• Overall, this LWC provides a simple way for users to upload files and view the files that have been uploaded.

• The import statement imports the necessary modules from the LWC and Apex modules. LightningElement is the base class for Lightning web components, api is a decorator that exposes a public property or method, and track is a decorator that tracks changes to a property and re-renders the component when the property changes. fetchFiles is a method defined in the fileuploadcontroller Apex class that fetches the files related to the current record.

• The FileUploadExample class is defined, which extends the LightningElement base class.

• The @api recordId property is defined as a public property to hold the record id of the current record.

• The @track lstAllFiles and @track error properties are defined to hold the list of uploaded files and any error that occurs while fetching the files.

• The get acceptedFormats() method returns an array of accepted file formats that are allowed to be uploaded, such as .pdf, .png, and .jpg.

• The handleUploadFinished(event) method is called when the file upload is finished. It calls the connectedCallback() method to refresh the list of uploaded files.

• The connectedCallback() method is called when the component is connected to the DOM. It calls the fetchFiles() method from the fileuploadcontroller Apex class with the current record id to fetch the files related to the record. The result is stored in the lstAllFiles property, and any error is stored in the error property.

APEX CLASS

public class fileuploadcontroller {

    @AuraEnabled(cacheable=false)

    public static List<ContentDocumentLink> fetchFiles(String recordId){

        return [SELECT LinkedEntityId, ContentDocument.CreatedDate,

                ContentDocument.Title,

                ContentDocument.ContentSize, ContentDocument.FileType

                 FROM ContentDocumentLink  

                WHERE LinkedEntityId  =:recordId];

    }

}