Notes
HTML
<template>
<!-- Account selection -->
<lightning-combobox
name="account"
label="Select Account"
value={selectedAccountId}
options={accountOptions}
onchange={handleAccountChange}
placeholder="Choose an Account">
</lightning-combobox>
<!-- File upload component -->
<lightning-file-upload
label="Upload Documents"
name="fileUploader"
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
record-id={selectedAccountId}
onuploadfinished={handleUploadFinished}>
</lightning-file-upload>
<!-- Success or Error message -->
<template if:true={message}>
<p class="slds-text-color_success">{message}</p>
</template>
<template if:true={errorMessage}>
<p class="slds-text-color_error">{errorMessage}</p>
</template>
</template>
JavaScript
import { LightningElement, track } from 'lwc';
import getAccountOptions from '@salesforce/apex/AccountController.getAccountOptions'; // Apex to fetch accounts
export default class UploadDocument extends LightningElement {
@track selectedAccountId;
@track accountOptions = [];
@track message;
@track errorMessage;
// Fetch accounts on component load
connectedCallback() {
this.loadAccounts();
}
// Fetch account options from Apex
loadAccounts() {
getAccountOptions()
.then(result => {
this.accountOptions = result.map(account => ({
label: account.Name,
value: account.Id
}));
})
.catch(error => {
this.errorMessage = 'Error fetching accounts: ' + error.body.message;
});
}
// Handle account selection change
handleAccountChange(event) {
this.selectedAccountId = event.target.value;
}
// Handle file upload success
handleUploadFinished(event) {
if (event.detail.files && event.detail.files.length > 0) {
this.message = `${event.detail.files.length} file(s) uploaded successfully.`;
this.errorMessage = undefined;
}
}
}
Apex
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccountOptions() {
// Fetch the accounts from Salesforce
return [SELECT Id, Name FROM Account LIMIT 100]; // You can adjust the limit or filter if necessary
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion> <!-- Set to the API version you are using -->
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
