When I click on new button then I uploaded the file using lightning file upload now if i'm clicking on cancel button, then I'm again click on new button then the previous uploaded file is there. How can i reset that uploaded file after clicking on cancel button.

Uploading a file

<div class="slds-col slds-size_1-of-1 slds_p_arround ">   
                            <label><span>*</span>Upload Medical Certificate</label>                 
                            <lightning-file-upload name="fileUploader" accept={acceptedFormats} record-id={myRecordId} onuploadfinished={handleUploadFinished}>
                            </lightning-file-upload> {docName}

Cancel button

<button type="button" class="slds-button slds-button_destructive" onclick={closeSuspendModal}>Cancel</button>



get acceptedFormats() {
        return ['.pdf', '.png', '.docx', '.jpg', '.jpeg'];

    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        this.docName=uploadedFiles[0].name+' uploaded successfully';
  • Hi, and welcome to SFSE! What does your code look like right now? How far have you gotten? Please take a moment to read about How to Ask and take the quick tour, then edit your question to include more information so we can better assist you.
    – sfdcfox
    Dec 5, 2020 at 14:03
  • Currently on cancelling the button I only close open modal and I want to reset that uploading file if i'm click on cancel button
    – user90782
    Dec 5, 2020 at 15:20
  • Again, if you'd share some code, it would be easier to help you. Generally speaking, you can unrender and rerender the modal to reset the fields within.
    – sfdcfox
    Dec 5, 2020 at 22:56
  • You can check now, i added the code in my question
    – user90782
    Dec 6, 2020 at 7:42

1 Answer 1


You'll want to unrender the entire modal, or at least the upload component. For example, you could:

<lightning-file-upload if:true={isShowSuspendModal} name="fileUploader" accept={acceptedFormats} record-id={myRecordId} onuploadfinished={handleUploadFinished}>

This would cause the component to completely unrender when the model is hidden, which should cause the values to reset.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .