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.v21.1.dll

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.

<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron">
    <svg class="drop-file-icon mb-3" role="img" style="width: 42px; height: 42px;"><use href="#drop-file-icon"></use></svg>
    <span>Drag and Drop File Here</span>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/UploadFile/" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white">
</DxUpload>

Upload Drag And Drop

Refer to CSS Classes for more information.

Run Demo: Upload - Overview

See Also