Need to get method called when Clear button is tapped

[Tuariq]

Team,

How to get method that is called when clear button of uploader is clicked?

I need to perform some action when Clear button is clicked

PS: It cannot be done on clearing event. I need the method that is called when Clear button in tapped

Thanks

Tuariq

[Sureshkumar P]

Hi Tuariq, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement. We can able to bind the click event to the clear button by manually by using our button customization.  

 

Kindly refer the below code block. 

 

[app.component.html] 

 

<ejs-uploader #defaultupload id='defaultfileupload' [autoUpload]='false' [asyncSettings]='path' [dropArea]='dropElement'  [buttons]="buttons" ></ejs-uploader> 

 

[app.component.ts] 

 

import { Component, ViewChild, ViewEncapsulation, Inject, AfterViewInit } from '@angular/core'; 

import { EmitType, detach, createElement } from '@syncfusion/ej2-base'; 

import { UploaderComponent, RemovingEventArgs, ClearingEventArgs } from '@syncfusion/ej2-angular-inputs'; 

import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups'; 

import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons'; 

 

/** 

 * Default Uploader Default Component 

 */ 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    styleUrls: ['app.component.css'], 

    encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent implements AfterViewInit { 

 

  ngAfterViewInit() { 

    this.clearEle.onclick = function(){ 

      console.log("click raised"); 

   }; 

  } 

    public path: Object = { 

        saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 

        removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 

    }; 

   public clearEle = createElement('span', { className: 'remove e-icons', innerHTML : 'Clear All'});    

   public buttons: Object = { 

    browse: 'Choose file', 

    clear: this.clearEle 

   }; 

 

    public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement; 

 

     

 

    constructor() { 

         

    } 

} 

 

 

 

We have created a sample based on your requirement. Kindly refer the sample here: https://stackblitz.com/edit/angular-efpnn6-itkzp5?file=app.component.ts  

 

Regards, 

Sureshkumar P