We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize a custom drop area?

I've created a file upload component with custom drop area. Before adding the drop area class as the droparea property of sfUploader, I had a nice set of css that changes the background and border when dragging over the drop area. but when I add it to the property, that no longer works. I'm guessing sfUploader overrides the drop area css or maybe intercepts the ondragover event.

Is there a way I can do what I'm trying to do?

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team February 14, 2023 03:04 PM UTC

Based on the shared information you are trying to use custom drop effect to the drop area. You can use the below CSS class to add custom drop effect.

@using Syncfusion.Blazor.Inputs

<div id="DropArea">

    Drop files here to upload


<SfUploader ID="UploadFiles" AutoUpload=false DropArea="#DropArea">

    <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>



    #DropArea {

        padding: 50px 25px;

        margin: 30px auto;

        border: 1px solid #c3c3c3;

        text-align: center;

        width: 20%;

        display: inline-flex;

        background-image: url('https://wallpaperaccess.com/full/809214.jpg');

        background-repeat: no-repeat;

        background-size: cover;



    body .e-upload-drag-hover {

        border-color: orangered;

        cursor: pointer;

        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);



    #uploadfile {

        width: 60%;

        display: inline-flex;

        margin-left: 5%;



KA Keith A Price February 14, 2023 08:44 PM UTC

That's awesome and works perfectly. Thank so much!!

UD UdhayaKumar Duraisamy Syncfusion Team February 15, 2023 11:11 AM UTC

We are glad that your requirements have been fulfilled on your end. We are always happy to assist you.

Live Chat Icon For mobile
Up arrow icon