Search results

Drag and drop

21 Oct 2021 / 1 minute 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.

razor
custom-drop.cs
index.css
Copied to clipboard
<div id="droparea">
    Drop files here to upload
</div>
@Html.EJS().Uploader("UploadFiles").DropArea("#droparea").AutoUpload(false).Render()
Copied to clipboard
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();
        }
    }
}
Copied to clipboard
#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.

razor
customize-drop.cs
Copied to clipboard
<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://ej2.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://ej2.syncfusion.com/services/api/uploadbox/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>
Copied to clipboard
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();
        }
    }
}