Add Confirm Dialog to Remove Files in Angular Uploader Component

26 Feb 20263 minutes to read

Customize the uploader to show a confirmation dialog before removing files. The following example uses the EJ2 Dialog component as a confirm dialog.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



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({
imports:      [  UploaderModule, DialogModule ],


standalone: true,
    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://services.syncfusion.com/angular/production/api/FileUploader/Save',
       removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/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 = [];
   }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also explore Angular File Upload feature tour page for its groundbreaking features. You can also explore our Angular File Upload example to understand how to browse the files which you want to upload to the server.