DxUpload.ExternalSelectButtonCssSelector Property
Specifies the CSS selector of a button or HTML element that invokes the open file dialog.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public string ExternalSelectButtonCssSelector { get; set; }
Property Value
Type | Description |
---|---|
String | The CSS selector of a button or HTML element. |
Remarks
Use the ExternalSelectButtonCssSelector
property to implement an external select button that invokes the open file dialog.
The following example demonstrates how to implement the external Select File button and drop zone container. Handle the SelectedFilesChanged event and use the Visible property to hide the Upload when the file list is empty.
<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 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><span class="m-1">or</span>
<button id="overviewDemoSelectButton" class="btn border-primary btn-primary m-1">Select File</button>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
Visible="@UploadVisible"
ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
ExternalDropZoneCssSelector="#overviewDemoDropZone"
ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white"
SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>
@code {
bool UploadVisible { get; set; } = false;
protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
UploadVisible = files.ToList().Count > 0;
InvokeAsync(StateHasChanged);
}
}
To hide the select button, set the ShowSelectButton property to false
.
See Also