5

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);
        }


    }

}
6

+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();
}
1
  • Thanks Sanket, for adding the code and reference so others can get help on that. accepting this answer so other can use that as reference. – user2809299 Jan 2 '20 at 5:30
5

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.

3
  • Thanks @sfdcfox, well in that case how should I select the normal HTML input, I tried to use the same querySelector function but it return null, any thoughts on that. – user2809299 Jan 2 '20 at 5:16
  • Sorry my bad never mind, its working :). Thank you so much again – user2809299 Jan 2 '20 at 5:27
  • @user2809299 You're welcome, glad I could be of service! – sfdcfox Jan 2 '20 at 5:28

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.