Salesforce Developer Community

Anonymous Developer
NEWBIE
160 Points
Member since 2021

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
36

Questions
63

Replies

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

<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.

Anonymous Developer
September 07, 2023
Like
0

2 replies

Need help on creating an LWC that shows the static resource pdf files

Hello everyone, I kindly request assistance in developing a Lightning Web Component that resembles a formal document, displaying a curated collection of manually uploaded static resources in Salesforce. Your expertise and guidance in this matter would be greatly appreciated.

Anonymous Developer
September 05, 2023
Like
0