DxFileInput.Visible Property

Specifies whether the component 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 component; otherwise, false.

Remarks

Disable the Visible property to hide the File Input component. You can disable the ShowSelectButton or ShowFileList property to hide only the select button or the file list.

The following example implements an external select button and a drop zone container for the File Input component. The component is hidden when its file list is empty.

Razor

<div id="overviewDemoDropZone" class="custom-drop-zone">
    <span class="drop-file-icon"></span>
    <span>Drag and Drop File Here</span><span class="custom-drop-zone-separator">or</span>
    <button id="overviewDemoSelectButton" class="custom-select-button">Select File</button>
</div>

<DxFileInput Visible="FileInputVisible" 
             FilesUploading="OnFilesUploading"
             SelectedFilesChanged="SelectedFilesChanged"
             ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
             ExternalDropZoneCssSelector="#overviewDemoDropZone"
             ExternalDropZoneDragOverCssClass="custom-drop-zone-drag-over" />

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

    protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
        FileInputVisible = files.ToList().Count > 0;
        InvokeAsync(StateHasChanged);
    }
    async Task OnFilesUploading(FilesUploadingEventArgs args) {
        foreach (var file in args.Files) {
            /* The following code is intended for demonstration purposes only.
            Do not read a stream directly in memory to avoid performance and security-related issues. */
            using var stream = new System.IO.MemoryStream();
            await file.OpenReadStream(file.Size).CopyToAsync(stream);
        }
    }
}

CSS

.custom-drop-zone {
    width: 100%;
    height: 230px;
    margin: 0;
    padding: 0;
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.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;
    margin-bottom: 1rem;
    -webkit-mask-image: url("../images/icons/drop-file.svg");
    mask-image: url("../images/icons/drop-file.svg");
}
.custom-drop-zone-separator {
    margin: 0.25rem;
}
.custom-select-button {
    margin: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #0d6efd;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #0d6efd;
    font: inherit;
    cursor: pointer;
}
.custom-drop-zone-drag-over {
    border-color: #6c757d;
    color: #212529;
}

Run Demo: File Input - Overview