You need to sign in to do that
Don't have an account?
Anonymous Developer
Need Help making a controller
Hello everyone I'm seeking assistance in developing a controller for my Lightning Web Component (LWC). I aim to implement comprehensive control over file uploads, including the capability to manage both uploads and deletions of the uploaded files. Below, you'll find the relevant code for reference.Your guidance and expertise on this matter would be greatly appreciated. Thank you.
HTML
Javascript
need help with the code. THanks in advance.
HTML
<template> <div class="container"> <p style="display:none">{recipientId}</p> <p style="display:none">{staticFileName}</p> <p style="display:none">{agreementLabel}</p> <p style="display:none">{documentUploadRequired}</p> <div class="buttons-section"> <lightning-button label={downloadButtonLabel} onclick={handleDownload} ></lightning-button> </div> <div class="read-only-card"> <object data={pdfUrl} title="Static Resource" type="application/pdf" width="100%" height="100%" ></object> </div> <div class="file-upload-section"> <lightning-file-upload accept=".pdf" onuploadfinished={handleUploadFinished} disabled={isDocumentUploaded} required record-id={recordId} ></lightning-file-upload> </div> <div class="checkbox-section"> <lightning-input type="checkbox" label={agreementLabel} checked={isAgreementChecked} onchange={handleAgreementChange} disabled={isDocumentUploaded} ></lightning-input> </div> <div class="buttons-section"> <lightning-button label={submitButtonLabel} onclick={handleAcknowledge} disabled={isButtonDisabled} ></lightning-button> </div> </div> </template>
Javascript
import { LightningElement, api, track } from 'lwc'; import { FlowNavigationNextEvent, FlowNavigationBackEvent, FlowNavigationFinishEvent } from 'lightning/flowSupport'; export default class aS_AcknowledgeDocumentLWC extends LightningElement { @api recipientId; @api staticFileName; @api agreementLabel; @api documentUploadRequired; @api documentUploadLabel; @api loadingMessage; @api submitButtonLabel; @api downloadButtonLabel; @api fileName; @track selectedFile; @track isAgreementChecked = false; @track isDocumentUploaded = false; get pdfUrl() { const url = `/resource/${this.fileName}`; console.log('PDF URL:', url); return url; } get isButtonDisabled(){ return !this.isAgreementChecked || this.isDocumentUploaded; } removeFile() { const fileUpload = this.template.querySelector('lightning-file-upload'); fileUpload.clear(); this.isDocumentUploaded = false; } handleAgreementChange(event) { this.isAgreementChecked = event.target.checked;//checkbox interaction } handleDocumentUpload() { if (!this.selectedFile) { // check if file is selected this.showToast('Error', 'Please select a file.', 'error'); return; } this.loadingMessage = 'Uploading document...'; // show loading message const formData = new FormData(); // create formData object to prepare for file upload formData.append('document', this.selectedFile); handleUpload({ formData })// send file to server for upload using apex .then(result => { this.isDocumentUploaded = true; // Set to true after successful upload this.loadingMessage = ''; // Clear loading message if (result.startsWith('Error')) { console.error(result); } else { console.log('File uploaded successfully:', result); } }) .catch(error => { // handle any errors that occur during the upload console.error('Error uploading document', error); this.loadingMessage = ''; // clear loading message this.showToast('Error', 'An error occurred while uploading the document.', 'error'); }); } handleAcknowledge() { this.dispatchEvent(new FlowNavigationNextEvent()); } handleDownload() { // Construct the URL to download the PDF document const pdfFileName = this.fileName; const pdfUrl = `/resource/${pdfFileName}`; const anchor = document.createElement('a'); // craete an anchor element to trigger the download anchor.href = pdfUrl; anchor.download = pdfFileName; anchor.click(); // trigger the download } handleUploadFinished(event) { const uploadedFiles = event.detail.files; if (uploadedFiles.length > 0) { this.uploadedFileName = uploadedFiles[0].name; this.isDocumentUploaded = true; } } }
need help with the code. THanks in advance.
You can refer below links which can help you with sample controller class for file upload/delete using lwc.
https://salesforce.stackexchange.com/questions/389714/how-to-delete-file-using-lwc-aura-from-salesforce
https://www.salesforcetroop.com/custom_file_upload_using_lwc
https://www.salesforcecodecrack.com/2020/07/custom-multiple-file-upload-in.html
https://www.w3web.net/upload-delete-and-preview-files-attachments-lightning/
If this information helps, please mark the answer as best. Thank you