DxUpload.Visible Property

Specifies whether the Upload is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

NuGet Package: DevExpress.Blazor

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 disply or hide the Upload.

The following example dynamically changes the Upload’s visibility state and implements the external UI elements:

• A Select File button using the ExternalSelectButtonCssSelector property
• A drop zone container using the ExternalDropZoneCssSelector property. Handle the SelectedFilesChanged event and hide the Upload when the file list is empty.

Note that the following 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();
    }
}

Run Demo: Upload - Overview