DxUpload.Visible Property

Specifies whether the Upload is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public bool Visible { get; set; }

Property Value

Type Description
Boolean

true, to display the Upload; otherwise, false.

Remarks

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 jumbotron">
    <svg class="drop-file-icon mb-3" role="img" style="width: 42px; height: 42px;"><use href="#drop-file-icon"></use></svg>
    <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/UploadFile/" 
          Visible="@UploadVisible" 
          ExternalSelectButtonCssSelector="#overviewDemoSelectButton" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white" 
          SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>

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

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

Upload External UI

Run Demo: Upload - Overview

See Also