1

I have an attachment button that works fine. Now I want to cancel button which cancels the uploaded file. For this, I need to re-render the div by clicking the cancel button. How ?.IS there is better solution.

<template>
    <lightning-card title="File Upload LWC" icon-name="custom:custom14">
       
        <div class="slds-m-left_xx-large"> /* ----> this DIV   */
            <label style="display: inline-block;position: relative;height: 50px;width: 150px;" for="inputFile">
                <div style="position: absolute;left: 0;top: 0;bottom: 0;
                            width: 100%;display: flex;border-radius: 10px;
                            align-items: center;justify-content: center;background: rgb(214, 211, 211);
                            border: 3px dotted #ffffff;">
                            <lightning-icon icon-name="utility:attach" alternative-text="attach!" title="attach" size="xx-small" ></lightning-icon>        Attachment
        </div>        
        <lightning-input type="file"   style="position: absolute;left: 0;opacity: 0;top: 0;bottom: 0;width: 100%;"
        accept=".xlsx, .xls, .csv, .png, .doc, .docx, .pdf"
        label="Attachment tt" onchange={openfileUpload}></lightning-input>
      </label>
     </div>
     
  
        {filename}
      
   </lightning-card> 
    
</template>
Improve this question

1 Answer 1

Reset to default
0

If I understand your question correctly, you can do this by using conditional rendering. Encapsulate your div with

<template if:true={isUploaderVisible}></template>

Make isUploaderVisible false when you press the cancel button. Show a spinner with setTimeout then set isUploaderVisible to true again. That way this uploader will be removed from the DOM and added again.

Improve this answer
2
  • cancelUploadFile(){ this.isUploaderVisible = false; setTimeout(function(){ this.isUploaderVisible = true; }, 1000); console.log('called out side' ); }
    – relcey
    May 24, 2022 at 5:34
  • after the value make false then in the set timeout function I want to make values true but it's not working
    – relcey
    May 24, 2022 at 5:36

You must log in to answer this question.

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