0

I have a lwc page where users can upload files in an object. Now, I have a requirement where the import button need to be enabled only after the file is uploaded succesfully. Till then, it has to be greyed out.

Below is the my lwc code:

HTML:

<template>
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
          <span class="slds-icon_container slds-icon-standard-case" title="opportunity">
            <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
            </svg>
            <span class="slds-assistive-text">opportunity</span>
          </span>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span class="slds-page-header__title slds-truncate" title="File Import">File Import</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <Lightning-card>
        <div style="width: max-content;margin-left: 20px;">

            1. Download Sample CSV File <br/> <br/>
            <div>
                <a href={FileUrl}
                   download={FileUrl}
                   target="_blank" >
                    <button>DOWNLOAD SAMPLE CSV FILE</button>

                </a>
            </div>

            <br/> <br/>
            2. Upload CSV File to Insert
            <div style="width: max-content;margin-left: 20px;">
                <input type="file" multiple accept=".csv" class="slds-p-around_small"/>
            </div><br>
            <div>
                <lightning-button
                        variant="brand"
                        label="Import"
                        onclick={readCSVFile}
                        class="slds-p-around_small"
                        >
                </lightning-button>
            </div>
            <div><lightning-formatted-text value={statusMessage} ></lightning-formatted-text></div>
        </div>
    </Lightning-card>
</template>

JS:

import { LightningElement, api } from 'lwc';
import executeBulkInsert from '@salesforce/apex/FileUploadController.executeBulkInsert';
import TRAILHEAD_CHARACTERS from '@salesforce/resourceUrl/SampleFiles';
export default class BulkInsert extends LightningElement {


    value = '';

    handleChange(event) {
        this.value = event.detail.value;
    }

    @api sobjectName = 'Case';
    statusMessage = '';
    FileUrl = 'Sample CSV File' + '/SampleFile/BulkLoad.pdf';
    readCSVFile() {

        console.log('readFiles');
        [...this.template.querySelector('input[type="file"]').files].forEach(async file => {
            try {
                const csvResult = await this.load(file);
                console.log('csvResult ' + csvResult);
                // Process the CSV here
                if(csvResult != null) {
                    executeBulkInsert({ csvResult: csvResult, sobjectName: this.sobjectName })
                        .then((result) => {
                            this.statusMessage = result;
                            console.log('final result', this.statusMessage);
                            this.error = undefined;
                        })
                        .catch((error) => {
                            console.log('error from apex: ' + error);
                            this.error = error;
                        });
                }
            } catch(e) {
                // handle file load exception
            }
        });
    }
    async load(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            console.log('file: ' + file);
            reader.onload = function() {
                resolve(reader.result);
                console.log('resolve: ' + reader.result);
            };
            reader.onerror = function() {
                reject(reader.error);
                console.log('reject: ' + reader.error);
            };
            console.log('abcd',reader.result);
            reader.readAsText(file);
        });
    }
}

can anyone please suggest any changes so that i can enable the import button only after the file is succesfully uploaded

5
  1. Create a tracked variable inputFiles to read the uploaded files.
  2. Use a getter to return the boolean if atleast 1 file is selected.
  3. Use that getter variable for dynamically managing disabled attribute of button.

HTML:

2. Upload CSV File to Insert
<div style="width: max-content;margin-left: 20px;">
    <input type="file" multiple class="slds-p-around_small" onchange={fileSelected} />
</div><br>
<div>
    <lightning-button
                        variant="brand"
                        label="Import"
                        onclick={readCSVFile}
                        class="slds-p-around_small"
                        disabled={disableImport}>
    </lightning-button>
</div>

JS:

@track inputFiles;

fileSelected(event) {
    this.inputFiles = event.target;
}

get disableImport() {
    return !this.inputFiles || this.inputFiles.files.length === 0;
}
3
  • the js code is not getting saved. While HTML is saved without any error, JS code is not getting saved to Salesforce. Is there anything that I'm missing here? – Skumar May 21 '20 at 7:12
  • what error are you getting in JS file? – salesforce-sas May 21 '20 at 7:22
  • 1
    My bad...wire and track are not imported in js file. When I included that, it is working perfectly :) – Skumar May 21 '20 at 7:28
0

If you want to disable the import button as long as there is no file uploaded.

fileSelected(event) {
    this.inputFiles = (event.target.files.length === 0) ? false : event.target;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.