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.v26.1.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 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.

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

Razor

@inject NavigationManager NavigationManager

<div id="overviewDemoDropZone" class="card custom-drop-zone rounded-3 w-100 m-0">
    <span class="drop-file-icon mb-3"></span>
    <span class="drop-file-label">Drag and Drop File Here</span><span class="m-1">or</span>
    <DxButton Id="overviewDemoSelectButton"
              CssClass="m-1"
              RenderStyle="ButtonRenderStyle.Primary"
              Text="Select File" />
</div>
<DxUpload Name="myFile"
          Visible="@UploadVisible"
          ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
          MaxFileSize="15000000"
          UploadUrl="@GetUploadUrl("api/Upload/Upload/")"
          SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>
<div class="upload-validation-text info-text">
    Uploads are limited to a single file up to 15 MB.
</div>

@code {
    bool UploadVisible { get; set; } = false;

    protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
        UploadVisible = files.ToList().Count > 0;

        InvokeAsync(StateHasChanged);
    }
    protected string GetUploadUrl(string url) {
        return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
    }
}

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;
}
/*BeginHide*/::deep/*EndHide*/.custom-drop-zone > *:not(#overviewDemoSelectButton) {
    pointer-events: none;
}

/*BeginHide*/::deep/*EndHide*/.upload-validation-text {
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
 }

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

To hide the select button, set the ShowSelectButton property to false.

Run Demo: Upload - Overview