How to customize a custom drop area?

[Keith A Price]

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?

[UdhayaKumar Duraisamy]

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

</div>

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

</SfUploader>

<style>

    #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%;

    }

</style>

[Keith A Price]

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

[UdhayaKumar Duraisamy]

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