How to validate dropped images in ASP.NET MVC File Upload

26 Aug 20262 minutes to read

The Uploader control allows you to select all types of images by assigning *image/* to the allowedExtensions property. You can also set the accept attribute on the uploader element.

By default, this works correctly when you select a file by clicking the browse button. However, this behavior is not supported for drag-and-drop file selection.

<div class="control_wrapper">
    @Html.EJS().Uploader("fileupload").AutoUpload(false).AllowedExtensions("image/*").Selected("onSelect").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
</div>

<script>
    function onSelect(args) {
     var uploadObj = document.getElementById("fileupload").ej2_instances[0];
         if (event.type === 'change') {
            var allImages = ['jpg', 'jpeg', 'gif', 'tiff', 'bpg'];
            var files = args.filesData;
            var modifiedFiles = [];
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                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);
          }
    }
</script>
.control_wrapper {
	max-width: 505px;
	margin: auto;
}

Explore the ASP.NET MVC File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET MVC File Upload example to see how to browse and select files for upload to the server.