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.v22.1.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.
<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>
Refer to CSS Classes for more information.
See Also