How to validate image on drop in EJ2 TypeScript File Upload

08 Sep 20264 minutes to read

The Uploader component allows you to upload all types of images by setting image/* as the allowedExtensions property value.

By default, this behavior works when selecting a file using the browse button. However, this behavior is not supported when dragging and dropping files. You can handle this manually using the selected event by filtering the file types (for example, by checking each file’s extension or type property against an allow-list) within the application.

In the following example, image files are validated using image/*. You can drag and drop image files with the extensions PNG, JPG, BPG, GIF, and TIFF to upload them.

import { Uploader } from '@syncfusion/ej2-inputs';


let uploadObj: any = new Uploader({
    asyncSettings: {
      saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
      removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    autoUpload: false,
    allowedExtensions: 'image/*',
    selected: onSelect

});
uploadObj.appendTo('#fileupload');

function onSelect(args: any): void {
  if (args.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;
    args.modifiedFilesData = modifiedFiles.concat(uploadObj.filesData);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <input type="file" id="fileupload" name="UploadFiles"/>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

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