DxUpload.ShowSelectButton Property

Specifies whether to show the select button that invokes the open file dialog.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(true)]
[Parameter]
public bool ShowSelectButton { get; set; }

Property Value

Type	Default	Description
Boolean	true

true, to show the select button; otherwise, false.

Remarks

The Upload displays the Select File button that invokes the open file dialog.

Set the ShowSelectButton property to false to hide this button. Use the ExternalDropZoneCssSelector and ExternalDropZoneDragOverCssClass to implement drag and drop functionality.

Razor
CSS
UploadController

razor

<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>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ShowSelectButton="false"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="bg-light border-secondary text-dark" >
</DxUpload>

css

.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");
}

csharp

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();
    }
}

You can also use the ExternalSelectButtonCssSelector property to implement an external select button.