Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    DxFileInput.ShowSelectButton Property

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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:

    File Input - External Drop Zone

    <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);
            }
        }
    }
    
    See Also