You can customize the uploader component using confirm dialog before removing the files. Here, ej2 dialog is used as confirm dialog. Refer to the following example.
import { Component, ViewChild } from '@angular/core';
import { EmitType } from '@syncfusion/ej2-base';
import { UploaderComponent, SelectedEventArgs } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
@ViewChild('defaultupload') uploadObj: UploaderComponent;
@ViewChild('dialog') dialog: DialogComponent;
public path: Object = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
};
public removeFile: any = [];
public content: string = 'Confirm to remove the file?';
public width: string = '250px';
public visible: boolean = false;
public target: string = '#container';
public buttons: Object = [{'click': this.onClick.bind(this), buttonModel: { content: 'OK', cssClass: 'e-flat', isPrimary: true}},
{'click': () => {this.dialog.hide(); }, buttonModel: { content: 'Cancel', cssClass: 'e-flat'} }];
public onremoving: EmitType<SelectedEventArgs> = (args: any) => {
args.cancel = true;
this.removeFile.push(args.filesData);
this.dialog.show();
};
onClick() {
this.dialog.hide();
this.uploadObj.remove(this.removeFile, true);
this.removeFile = [];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
@NgModule({
imports: [ BrowserModule, UploaderModule, DialogModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section" id="container">
<div class="col-lg-9">
<div class="control_wrapper">
<ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' (removing)='onremoving($event)'></ejs-uploader>
<ejs-dialog #dialog id='dialog' [content]='content' [buttons]='buttons' [width]='width' [visible]='visible' [target]='target'></ejs-dialog>
</div>
</div>
</div>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control_wrapper {
max-width: 500px;
min-width: 245px;
min-height: 200px;
margin: auto;
}