DxUpload.ShowSelectButton Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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.

Note that the following code snippet uses Bootstrap classes. To render elements correctly, enable the UseBootstrapStyles option in theme settings.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light">
    <span class="drop-file-icon icon-margin"></span>
    <span>Drag and Drop File Here</span>
</div>
<DxUpload Name="myFile"
          UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ShowSelectButton="false"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover" >
</DxUpload>

CSS

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}
.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}
.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");
}
.icon-margin {
    margin-bottom: 1rem;
}

UploadController

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.