We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need to get method called when Clear button is tapped

Thread ID:





149361 Nov 22,2019 07:35 PM UTC Nov 25,2019 01:23 PM UTC Angular - EJ 2 1
Tags: Uploader
Asked On November 22, 2019 07:35 PM UTC


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


Sureshkumar P [Syncfusion]
Replied On November 25, 2019 01:23 PM UTC

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. 
<ejs-uploader #defaultupload id='defaultfileupload' [autoUpload]='false' [asyncSettings]='path' [dropArea]='dropElement'  [buttons]="buttons" ></ejs-uploader> 
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 
    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')[0as 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  
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon