Skip to main content

DxUpload.Visible Property

Specifies whether the Upload is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public bool Visible { get; set; }

Property Value

Type Description

true, to display the Upload; otherwise, false.


Use the Visible property to show or hide the Upload.

The following example demonstrates how to dynamically change the Upload’s visibility state and implement the external UI: Select File button via the ExternalSelectButtonCssSelector property and drop zone container via the ExternalDropZoneCssSelector property. Handle the SelectedFilesChanged event and 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="" xmlns: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">
        <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 id="_x31_2"><path id="_x33__1_" class="st0" d="M28,26h-5v8h-2h-2v-8h-5l7-7L28,26z" /></g>
    <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>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white" 

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

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

Upload External UI

Run Demo: Upload - Overview

See Also