How to trigger a click() event on LWC element

Question

I'm trying to trigger a click event on file upload element in LWC but not able to do that. it doesn't throw any error or any file selection prompt. what I'm trying to achieve is clicking on a button should prompt me the file selection prompt which I usually get when I click on a file input element. In the traditional JS way I can simply write element.click() and it will trigger the respective click event on that element. Same thing I tried to do on the LWC element but it is not working.

Template code [HTML]

<template>
    <div class="standerdRelatedListCustom">
        <div class="slds-card slds-card_boundary">
            <lightning-card>        
                <h3 slot="title" title="Contracts">                    
                    <lightning-icon icon-name="doctype:attachment" alternative-text="Attachemet" size="small"></lightning-icon>
                    <b style="margin-left: 10px;">Addtional Documents</b>                    
                </h3>                
                <div slot="actions">
                    <template if:true={isLargeWidth} >                        
                        <lightning-button key={eachBtnRow.Name} label="Upload Files" onclick={uploadFileInput}></lightning-button>                        
                    </template>
                    <template if:false={isLargeWidth} >
                        <div class="slds-media__body slds-float_right">                                        
                            <div class="slds-dropdown-trigger">                                
                                <lightning-button-icon  icon-name="utility:down" variant="border-filled" alternative-text="" slot="actions" size="x-small"></lightning-button-icon>                                
                                <div class="slds-dropdown slds-dropdown_right">
                                    <ul class="slds-dropdown__list slds-dropdown--length-1" role="menu">                                        
                                        <li class="slds-dropdown__item" role="presentation">
                                            <lightning-button variant="base" label="Upload Files"  onclick={uploadFileInput} class="slds-m-left_x-small"></lightning-button>
                                        </li>                   
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>      
                <div  slot="footer">  
                    <template if:true={isMoreData}>                      
                        <p slot="footer"><a onclick={openAllRecords}>View All</a></p>  
                    </template>                      
                </div>     
                <!-- Standard Related List Data Here-->
                <div class="slds-card__body slds-card__body_inner">                    
                    <lightning-input type="file" class="customFileInputClass"  onchange={handleFilesChange} onnotify={test} multiple></lightning-input>                    
                </div>              
            </lightning-card>
        </div>
    </div>

</template>

Component JS

import { LightningElement } from 'lwc';

export default class addComponentDocument extends LightningElement {
    uploadFileInput(){        
        // let FileSelector = this.template.querySelector(`.customFileInputClass`);
        // FileSelector.click(); 
        try {
            console.log('test');
            let entitySelectRow = this.template.querySelector('div.standerdRelatedListCustom');
            let fileUploadBtn = entitySelectRow.querySelector('lightning-input.customFileInputClass'); 
            fileUploadBtn.click();
        } catch (error) {
            console.log(error);
        }


    }

}

Answer 1

+1 to @sfdcfox, A sample example to open a file selector prompt on clicking of a button is here in this playground:- Playground

<template>
   <input id="fileInput" type="file" style="display:none;" />
   <input type="button" value="Choose Files!" onclick={handleclick}/>
</template>

JavaScript

handleclick(){
    this.template.querySelector('input').click();
}

Answer 2

It appears that there's no way in LWC to send events to a component's internal components, which is why this code isn't working. Instead, use a normal HTML input and use that instead.

Answer 3

Just a heads up, as of 2022 lightning-base-components (lighting-button) is passing the click event to the button.

Should just be able to call this.template.querySelector('lightning-button').click();

lightning-base-components\src\lightning\button\button.js#L175

     /**
     * Simulates a mouse click on the button.
     */
    @api
    click() {
        if (this._connected) {
            this.button.click();
        }
    }