blazor-devexpress-dot-blazor-dot-dxupload-b5178a10.md
Specifies the CSS selector of a button or HTML element that invokes the open file dialog.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public string ExternalSelectButtonCssSelector { get; set; }
| Type | Description |
|---|---|
| String |
The CSS selector of a button or HTML element.
|
Use the ExternalSelectButtonCssSelector property to implement an external select button that invokes the open file dialog.
The following example implements 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">
<span class="drop-file-icon mb-3"></span>
<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="bg-light border-secondary text-dark"
SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>
@code {
bool UploadVisible { get; set; } = false;
protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
UploadVisible = files.ToList().Count > 0;
InvokeAsync(StateHasChanged);
}
}
.custom-drop-zone {
padding: 0 !important;
border-style: dashed !important;
border-width: 2px !important;
height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.custom-drop-zone svg {
width: 42px;
height: 42px;
}
.drop-file-icon {
background-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
background-position: center center;
background-color: currentColor;
width: 48px;
height: 48px;
-webkit-mask-image: url("../images/icons/drop-file.svg");
mask-image: url("../images/icons/drop-file.svg");
}
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace BlazorDemo.AspNetCoreHost;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase {
[HttpPost("[action]")]
public ActionResult Upload(IFormFile myFile) {
try {
// Write code that saves the 'myFile' file.
// Don't rely on or trust the FileName property without validation.
} catch {
return BadRequest();
}
return Ok();
}
}
To hide the select button, set the ShowSelectButton property to false.
See Also