DxUpload.ExternalDropZoneCssSelector Property

Specifies the CSS selector of a container or HTML element where users can drop files to upload.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
String

The CSS selector of a container or HTML element where users can drop files.

Remarks

Use the ExternalDropZoneCssSelector property to enable drag and drop functionality in the Upload. This property specifies the CSS selector of an external zone where users can drop files to upload.

You can also use the ExternalDropZoneDragOverCssClass to define the CSS class that is applied to 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

Run Demo: Upload - Overview

See Also