DxUpload.Visible Property

Specifies whether the Upload is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

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

Property Value

Type	Default	Description
Boolean	true	true, to display the Upload; otherwise, false.

Remarks

Use the Visible property to show or hide the Upload.

The following example dynamically changes 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.

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><span class="margin-style">or</span>
    <DxButton Id="overviewDemoSelectButton"
              CssClass="margin-style"
              RenderStyle="ButtonRenderStyle.Primary"
              Text="Select File" />
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          Visible="@UploadVisible" 
          ExternalSelectButtonCssSelector="#overviewDemoSelectButton" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
          SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>

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

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

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;
    margin: 0;
    width: 100%;
    border-radius: var(--dxds-border-radius-80);
}
.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;
}
.drag-zone {
    color: var(--dxds-color-content-neutral-default-rest);
}
.margin-style {
    margin: 0.25rem;
}

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

Run Demo: Upload - Overview