Drag and drop in Uploader Control

26 Oct 20223 minutes to read

The uploader component allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area.

By default, the uploader component act as drop area element. The drop area gets highlighted when you drag the files over drop area.

Custom drop area

The uploader component allows you to set external target element as drop area using the dropArea property. The element can be represented as HTML element or element’s id.

CSHTML

<div id="droparea">
    Drop files here to upload
</div>
@Html.EJS().Uploader("UploadFiles").DropArea("#droparea").AutoUpload(false).Render()

Index.css

#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 drop area

You can customize the appearance of drop area by overriding the default drop area styles. The class “” and “” is available to handle this customization.

CSHTML

<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>

Customize-drop.cs

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();
        }
    }
}