Search results

Validate image/* on drop

The uploader component 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.

tagHelper
validate-image.cs
index.css
@using Syncfusion.EJ2

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}

@section ControlsSection{

   <div class="control_wrapper">
        <div id='preview'></div>
       <ejs-uploader id="fileupload" autoUpload="false" allowedExtensions="image/*" selected="onSelect" asyncSettings="@asyncSettings">
      </ejs-uploader>
    </div>

}

@section PreScripts {
<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>
}
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 IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}
.control_wrapper {
	max-width: 505px;
	margin: auto;
}