Skip to main content

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


public string ExternalDropZoneDragOverCssClass { get; set; }

Property Value

Type Description

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


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.

<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron w-100 m-0">
    <svg version="1.1" id="_x31_" xmlns="" xmlns: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">
        <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 id="_x31_2"><path id="_x33__1_" class="st0" d="M28,26h-5v8h-2h-2v-8h-5l7-7L28,26z" /></g>
    <span>Drag and Drop File Here</span>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white">

Upload Drag And Drop

Refer to CSS Classes for more information.

Run Demo: Upload - Overview

See Also