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

24 Aug 20263 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.

CSHTML

@{
    var 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" };
}
<div class="control_wrapper">
    <div id='preview'></div>
    <ejs-uploader id="fileupload" autoUpload="false" allowedExtensions="image/*" selected="onSelect" asyncSettings="@asyncSettings">
    </ejs-uploader>
</div>
<script>

    function onSelect(args) {
        var uploadObj = document.getElementById("fileupload").ej2_instances[0];
        if (event.type === 'drop') {
            var allImages = ['png', '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>

Index.css

.control_wrapper {
	max-width: 505px;
	margin: auto;
}

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