DxFileInput.ShowSelectButton Property

Specifies whether to show the built-in select button that invokes the Open dialog.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

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

Property Value

Type	Default	Description
Boolean	true	true to show the built-in select button; otherwise, false.

Remarks

The select button invokes the Open dialog. In this dialog, users can select files that the File Input component should upload. Disable the ShowSelectButton property to hide the built-in select button. Specify the ExternalSelectButtonCssSelector property to implement an external select button.

Note

If you specify the ExternalSelectButtonCssSelector property, the File Input component hides the built-in select button regardless of the ShowSelectButton property value.

You can enable drag and drop functionality in the File Input component. To enable this functionality, create a drop zone and assign its CSS selector to the ExternalDropZoneCssSelector property. The ExternalDropZoneDragOverCssClass property specifies the CSS class applied to this drop zone when users drag files over it.

The following example hides the built-in select button and implements a drop zone container for the File Input component:

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 w-100 m-0">
    <span class="drop-file-icon mb-3"></span>
    <span>Drag and Drop File Here</span>
</div>

<DxFileInput FilesUploading="OnFilesUploading"
             ShowSelectButton="false"
             ExternalDropZoneCssSelector="#overviewDemoDropZone"
             ExternalDropZoneDragOverCssClass="bg-light border-secondary text-dark" />

@code {
    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 {
    padding: 0 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    height: 230px;
    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;
    -webkit-mask-image: url("../images/icons/drop-file.svg");
    mask-image: url("../images/icons/drop-file.svg");
}