CustomDropArea.cshtml

@using Syncfusion.EJ2

@section ControlsSection {
<div class="col-lg-12 control-section">
    <div class="control_wrapper">
      <div class="sample_wrapper">
            <div class="dropArea_wrap" id="dropTarget">
                <div class="font-icons">
                    <span class="e-icons sf-icon-pdf"></span>
                    <span class="e-icons sf-icon-txt"></span>
                    <span class="e-icons sf-icon-png"></span>
                </div>
                <span class="dropText">Drop files here to upload</span>
            </div>
            <div id="dropArea">
                <span id="drop" class="droparea"><a id="browse" onclick="browseClick()"><u>Browse</u></a> </span>
                @Html.EJS().Uploader("fileupload").DropArea("#dropTarget").Template("#uploaderTemplate").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Uploader/Save"), RemoveUrl = @Url.Content("~/Uploader/Remove") }).Selected("onSelect").Success("onUploadSuccess").Failure("onUploadFailed").Progress("onUploadInProgress").Removing("onFileRemove").AllowedExtensions(".pdf, .png, .txt").Render()
            </div>
        </div>
    </div>
</div>
    <script>
        document.getElementById('dropArea').onclick = function (e) {
            var target = e.target;
            if (target.classList.contains('e-file-delete-btn')) {
                var uploadObj = document.getElementById('fileupload').ej2_instances[0];
                for (var i = 0; i < uploadObj.getFilesData().length; i++) {
                    if (target.parentElement.getAttribute('data-file-name') === uploadObj.getFilesData()[i].name) {
                        uploadObj.remove(uploadObj.getFilesData()[i]);
                    }
                }
            }
            else if (target.classList.contains('e-file-remove-btn')) {
                ej.base.detach(target.parentElement);
            }
        };

        function browseClick(args) {
            document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;
        }

        function onSelect(args) {
            var allowedTypes = ['pdf', 'png', 'txt'];
            var modifiedFiles = [];
            for (var i = 0; i < args.filesData.length; i++) {
                if (allowedTypes.indexOf(args.filesData[i].type.toLowerCase()) > -1) {
                    modifiedFiles.push(args.filesData[i]);
                }
            }
            if (modifiedFiles.length > 0) {
                args.isModified = true;
                args.modifiedFilesData = modifiedFiles;
            }
            else {
                args.cancel = true;
            }
        }

        function onUploadSuccess(args) {
            var li = getLiElement(args);
            li.querySelector('.upload-status').innerHTML = args.file.status;
            li.querySelector('.upload-status').classList.add('upload-success');
        }

        function onUploadFailed(args) {
            var li = getLiElement(args);
            li.querySelector('.upload-status').innerHTML = args.file.status;
            li.querySelector('.upload-status').classList.add('upload-failed');
        }

        function onUploadInProgress(args) {
            var progressValue = Math.round((args.e.loaded / args.e.total) * 100) + '%';
            var li = getLiElement(args);
            li.querySelector('.upload-status').innerHTML = args.file.status + '(' + progressValue + ' )';
        }

        function getLiElement(args) {
            var liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-files > li');
            var li;
            for (var i = 0; i < liElements.length; i++) {
                if (liElements[i].getAttribute('data-file-name') === args.file.name) {
                    li = liElements[i];
                }
            }
            return li;
        }
        function onFileRemove(args) {
            args.postRawFile = false;
        }
        
    </script>
<script id="uploaderTemplate" type="text/x-template">
    <span class='wrapper'>
        <span class='icon template-icons sf-icon-${type}'></span>
        <span class='name file-name'>${name} (${size} bytes)</span>
        <span class='upload-status'>${status}</span>
    </span>
    <span class='e-icons e-file-remove-btn' title='Remove'></span>
</script>
}

<link href="@Url.Content("~/Content/uploader/droparea.css")" rel="stylesheet" />


<script id="uploaderTemplate" type="text/x-template">
    <span class='wrapper'>
        <span class='icon template-icons sf-icon-${type}'></span>
        <span class='name file-name'>${name} (${size} bytes)</span>
        <span class='upload-status'>${status}</span>
    </span>
    <span class='e-icons e-file-remove-btn' title='Remove'></span>
</script>

@section ActionDescription{
    <div id="action-description">
        <p> This example demonstrates how to configure custom drop area of the Uploader. You can drop the files into specified custom drop area location to upload.  </p>
</div>
}

@section Description{
    <div id="description">
        <p>
            The Uploader control allows to set any external element as drop area using the <a target="_blank" href="https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/aspnetcore/Syncfusion.EJ2~Syncfusion.EJ2.Inputs.Uploader~DropArea.html">dropArea</a> property.
        </p>
        <p>
           More information on the drag-and-drop can be found on this <a target="_blank" href="https://ej2.syncfusion.com/aspnetmvc/documentation/uploader/file-source/#drag-and-drop">documentation section</a>.
        </p>

    </div>
}

@section Meta{
                    <meta name="description" content="This example demonstrates the Custom Drop Area in ASP.NET MVC File Upload control. Explore here for more details."/>
                }

@section Title{
                    <title>ASP.NET MVC File Upload Custom Drop Area Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Custom Drop Area in ASP.NET MVC File Upload Control</h1>
                }