How to add a confirm dialog in Angular Uploader

31 Aug 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.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 the Angular File Upload feature tour page for its groundbreaking features. Explore our Angular File Upload example to understand how to browse and select the files which you want to upload to the server.