BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
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?
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> |
That's awesome and works perfectly. Thank so much!!
We are glad that your requirements have been fulfilled on your end. We are always happy to assist you.