Search results

Validate image/* on drop

The uploader control allows you to select all types of images using the *image/ ** to allowedExtensions property. You can directly set it to accept the attribute of uploader element.

By default, it is working fine when you select a file by clicking the browse button. But, this behavior is not supported to drag and drop the files for selection.

razor
validate-image.cs
index.css
<div class="control_wrapper">
    @Html.EJS().Uploader("fileupload").AutoUpload(false).AllowedExtensions("image/*").Selected("onSelect").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public partial class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}
.control_wrapper {
	max-width: 505px;
	margin: auto;
}