Dynamic File Upload Component in Salesforce LWC

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
            <property name="objectName" type="String" label="Object Name" description="API Name of the Salesforce Object"/>
            <property name="fieldNames" type="String" label="Field Names" description="Comma separated API Names of the fields"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

<template>
<lightning-card title="Dynamic File Upload">
<!-- Display configured object name and fields -->
<p class="slds-m-around_medium">Object: {objectName}
</p>
<p class="slds-m-around_medium">Fields: {fieldNames}
</p>
<!-- Download Template Button -->
<lightning-button label="Download Template" onclick={downloadTemplate} class="slds-m-around_medium" disabled={disableTemplateDownload}>
</lightning-button>
<!-- File Upload -->
  <lightning-file-upload            label="Upload File"            accept=".csv,.xlsx"            record-id={recordId}            onuploadfinished={handleUploadFinished}            multiple={false}            class="slds-m-around_medium">
  </lightning-file-upload>
  <!-- Modal Popup for Error and Success Messages -->
    <template if:true={showModal}>
      <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
          <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
              <lightning-icon icon-name="utility:close" alternative-text="close" size="small">
              </lightning-icon>
              <span class="slds-assistive-text">Close
              </span>
            </button>
            <h2 class="slds-text-heading_medium">{modalTitle}
            </h2>
          </header>
          <div class="slds-modal__content slds-p-around_medium">
            <p>{modalMessage}
            </p>
          </div>
          <footer class="slds-modal__footer">
            <lightning-button variant="neutral" label="Close" onclick={closeModal}>
            </lightning-button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open">
      </div>
    </template>
  </lightning-card>
</template>

import { LightningElement, track, api } from 'lwc';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import getObjectFields from '@salesforce/apex/DynamicUploadController.getObjectFields';
import insertRecords from '@salesforce/apex/DynamicUploadController.insertRecords';
export default class DynamicUploadComponent extends LightningElement {
    @api objectName; // Object name from meta XML
    @api fieldNames; // Field names from meta XML
    @track disableTemplateDownload = false; // Enable template download initially
    @track showModal = false; // Control the display of the modal
    @track modalTitle = ''; // Modal title
    @track modalMessage = ''; // Modal message
    connectedCallback() {
        // Check if objectName and fieldNames are provided
        if (!this.objectName || !this.fieldNames) {
            this.disableTemplateDownload = true;
            this.showModalMessage('Error', 'Object Name and Field Names are required.');
        }
    }


    // Download template based on the object name and field names
    downloadTemplate() {
        this.showModal = false;
        const fieldsArray = this.fieldNames.split(',').map(field => field.trim());
        this.generateTemplate(fieldsArray);
    }

    // Generate CSV/Excel template with field names as header

    generateTemplate(fields) {
        const csvString = fields.join(',') + '\n';
        const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
        saveAs(blob, `${this.objectName}_Template.csv`);
    }

    // Handle file upload and process the data

   handleUploadFinished(event) {
        this.showModal = false;
        const uploadedFiles = event.detail.files;
        if (uploadedFiles.length > 0) {
            this.processUploadedFile(uploadedFiles[0]);
        }
    }

    // Process uploaded file
    processUploadedFile(file) {
        const reader = new FileReader();
        reader.onload = () => {
            const content = reader.result;
            const workbook = XLSX.read(content, { type: 'binary' });
            const sheetName = workbook.SheetNames[0];
            const sheet = workbook.Sheets[sheetName];
            const csvData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
            if (csvData.length > 1) {
                this.uploadData(csvData);
            } else {
                this.showModalMessage('Error', 'The uploaded file is empty or has no data rows.');
            }
        };
        reader.onerror = () => {
            this.showModalMessage('Error', 'Error reading the uploaded file.');
        };
        reader.readAsBinaryString(file);
    }



    // Upload data to Salesforce
    uploadData(csvData) {
        const fields = csvData[0];
        const records = [];
        for (let i = 1; i < csvData.length; i++) {
            let record = {};
            for (let j = 0; j < fields.length; j++) {
                record[fields[j]] = csvData[i][j] || '';
            }
            records.push(record);
        }

        insertRecords({ objectName: this.objectName, records: JSON.stringify(records) })
            .then(() => {
                this.showModalMessage('Success', 'Records have been successfully uploaded.');
            })
            .catch(error => {
                this.showModalMessage('Error', `Error uploading records: ${error.body.message}`);
            });
    }


    // Show modal with error or success message
    showModalMessage(title, message) {
        this.modalTitle = title;
        this.modalMessage = message;
        this.showModal = true;
    }

    // Close the modal
    closeModal() {
        this.showModal = false;
    }
}

.slds-modal__container {    width: 50%;    max-width: 50rem; }
.slds-modal__header {    display: flex;    justify-content: space-between;    align-items: center; }
.slds-modal__footer {    text-align: right; }