Lesson: 26 | Upload Documents from Account Record Page

Notes

Notes

HTML

<template>
    <lightning-card title="Upload Documents" icon-name="standard:attachment">
        <div class="slds-p-horizontal_medium">
            <lightning-file-upload 
                label="Upload Document"
                record-id={recordId}
                accept={acceptedFormats}
                onuploadfinished={handleUploadFinished}>
            </lightning-file-upload>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class FileUploadToAccount extends LightningElement {
    @api recordId;  // To get the Account record Id

    acceptedFormats = '.pdf, .docx, .jpg, .png';  // Accepted file types

    handleUploadFinished(event) {
        // Event is fired when file upload is complete
        const uploadedFiles = event.detail.files;
        const fileNames = uploadedFiles.map(file => file.name).join(', ');

        // Show a toast notification
        const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: `Successfully uploaded: ${fileNames}`,
            variant: 'success',
        });
        this.dispatchEvent(toastEvent);
    }
}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <!-- Allow the component to be used in Record Pages -->
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Prev You need to login to have access to the quizzes. MARK AS COMPLETED Next

Mastered by 0 users.