How to creates a custom file uploader component that allows multiple files of JPG, PNG, PDF to be upload in object Uses of ‘lightning-file-upload’ elements in Salesforce Lightning Web Component — LWC

[vijayk3327]

In this post we are going to learn about How to creates a custom file uploader component that allows multiple files of JPG, PNG, PDF to be upload in object Uses of ‘lightning-file-upload’ elements in Salesforce Lightning Web Component — LWC .

A lightning-file-upload component provides an easy and integrated way for users to upload multiple files. You can configure the file uploader to accept specific file types, and the file types are filtered in the user’s file browser. To upload files using lightning-file-upload, you can:

Select a file on your system by clicking the button to open the system’s file browser
Drag a file from your system into the file selector dropzone
To associate an uploaded file to a record, specify the record-id attribute. Uploaded files are available in Files Home under the Owned by Me filter and on the record’s Attachments related list that’s on the record detail page. If you don’t specify the record-id attribute, the file is private to the uploading user.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcFileUpload.html

`

</lightning-card>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcFileUpload.js

` import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class LwcFileUpload extends LightningElement {
@api
myRecordId;

get acceptedFileItem() {
    return ['.pdf', '.png', '.pdf'];
}

uploadFiledAction(event) {
    // Get the list of uploaded files
    const uploadedFiles = event.detail.files;
   // alert("No. of files uploaded : " + uploadedFiles.length);
    const toastEvent = new ShowToastEvent({
        title:'Files uploaded successfully',
        message:'No. of files uploaded ' + uploadedFiles.length,
        variant:'success',
    })
    this.dispatchEvent(toastEvent);
}

}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcFileUpload.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-