Drag and Drop in ASP.NET MVC File Upload

26 Aug 20263 minutes to read

The Uploader control allows you to drag and drop files for upload. You can drag the files from the file explorer and drop them into the drop area.

By default, the Uploader control acts as the drop area element. The drop area gets highlighted when you drag files over it.

Custom drop area

The uploader control allows you to set an external target element as the drop area using the dropArea property. You can specify the target element as an HTML element or its ID.

<div id="droparea">
    Drop files here to upload
</div>
@Html.EJS().Uploader("UploadFiles").DropArea("#droparea").AutoUpload(false).Render()
#droparea {
    padding: 50px 25px;
    margin: 30px auto;
    border: 1px solid #c3c3c3;
    text-align: center;
    width: 20%;
    display: inline-flex;
}

.e-file-select,
.e-file-drop {
    display: none;
}

body .e-upload-drag-hover {
    outline: 2px dashed brown;
}

#uploadfile {
    width: 60%;
    display: inline-flex;
    margin-left: 5%;
}

Customize the drop area

You can customize the appearance of the drop area by overriding the default drop area styles. The e-file-select-wrap and e-upload classes are available to customize the drop area.

<div id='dropArea' style='height: auto; overflow: auto'>
    <span id='drop'> Drop files here or <a href='' id='browse'><u>Browse</u></a> </span>
    @Html.EJS().Uploader("UploadFiles").AllowedExtensions(".jpg,.png").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 browseClick() {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;
    }
</script>
<style>
    .e-file-select-wrap {
        display: none;
    }

    #dropArea .e-upload {
        border: 0;
        margin-top: 15px;
    }

    #drop {
        padding-left: 30%;
    }

    #dropArea {
        min-height: 18px;
        border: 1px dashed #c3c3cc;
        padding-top: 15px;
        margin: 20px auto;
        width: 400px;
    }
</style>
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();
        }
    }
}