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