November 4, 2021

Simple File Upload Lightning Web Component in Salesforce for Guest User

HTML:
<template>
    <lightning-file-upload
        label="Attach Supporting Document"
        name="fileUploader"
        record-id={recordId}
        onuploadfinished={handleUploadFinished}>
    </lightning-file-upload>
</template>

JavaScript:
import { api, LightningElement } from 'lwc';

export default class FileUpload extends LightningElement {    

    @api
    recordId;

    handleUploadFinished( event ) {
        
        console.log( 'Record Id is ' + this.recordId );
        const uploadedFiles = event.detail.files;
        alert('No. of files uploaded : ' + uploadedFiles.length);

    }

}

js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property
                name="recordId" type="String"
                label="Record Id" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>


File Settings:
 

Experience Builder Configuration:


Output:
 


No comments:

Post a Comment