DxUpload.ExternalDropZoneDragOverCssClass Property

Specifies the CSS class that is used for the drop zone when users drag files over it.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string ExternalDropZoneDragOverCssClass { get; set; }

Property Value

Type	Description
String	The CSS class applied to the drop zone when users drag files over it.

Remarks

To enable drag and drop functionality in the Upload, implement an external zone where users can drop a file to upload. Use the ExternalDropZoneCssSelector property to specify the CSS selector of a container or HTML element. The ExternalDropZoneDragOverCssClass property defines the CSS class that is used for the drop zone when users drag files over it.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron w-100 m-0">
    <svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
        <style type="text/css">
            .st0{fill-rule:evenodd;clip-rule:evenodd;}
        </style>
        <g id="_x32_">
            <path id="_x33_" class="st0" d="M34,42H8c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h19l11,11v27C38,40.2,36.2,42,34,42z M27,4v7h7L27,4z
            M34,14H24V4H8v34h26V14z" />
        </g>
        <g id="_x31_2"><path id="_x33__1_" class="st0" d="M28,26h-5v8h-2h-2v-8h-5l7-7L28,26z" /></g>
    </svg>
    <span>Drag and Drop File Here</span>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white">
</DxUpload>

CSS

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.custom-drop-zone.custom-drag-over {
    background-color: #868A8D;
}

UploadController

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace BlazorDemo.AspNetCoreHost;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase {
    [HttpPost("[action]")]
    public ActionResult Upload(IFormFile myFile) {
        try {
            // Write code that saves the 'myFile' file.
            // Don't rely on or trust the FileName property without validation.
        } catch {
            return BadRequest();
        }
        return Ok();
    }
}

Refer to CSS Classes for more information.

Run Demo: Upload - Overview