0

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>

1 Answer 1

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.

2
  • cancelUploadFile(){ this.isUploaderVisible = false; setTimeout(function(){ this.isUploaderVisible = true; }, 1000); console.log('called out side' ); }
    – relcey
    May 24 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 at 5:36

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.