How to validate image on drop in Angular Uploader

31 Aug 20263 minutes to read

The Uploader component allows you to upload all image types by setting image/* to the allowedExtensions property.
You can set this directly to the accept attribute of the Uploader element.

By default, this validation works when selecting files via the browse button. However, it is not enforced on dragged-and-dropped files. You can implement manual validation for drops by handling the selected event, checking each file’s extension against an allow-list, marking disallowed entries, and setting args.isModified = true so the Uploader reflects the modified list.

In the following example, dropped files are validated against an image/* allow-list of PNG, JPG/JPEG, GIF, TIFF, and BPG extensions. Browse-button selections still rely on allowedExtensions/accept; the manual check applies only to drops.

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



import { Component } from '@angular/core';
import { EmitType } from '@syncfusion/ej2-base';
import { SelectedEventArgs, UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import {  } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
         UploaderModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './default.html',
    styleUrls: ['./index.css']
})

export class AppComponent {

   public path: Object = {
       saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
       removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
   };
    public onSelected: EmitType<SelectedEventArgs> = (args: any) =>  {
        if (event!.type === 'drop') {
            let allImages: Array<string> = ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'bpg'];
            let files = args.filesData;
            let modifiedFiles = [];
            for (let file of files) {
              if (allImages.indexOf(file.type) === -1) {
                file.status = 'File type is not allowed';
                file.statusCode = '0';
              }
              modifiedFiles.push(file);
            }
            args.isModified = true;
        }
   };
}
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 validate image files on drag-and-drop.