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.ExternalSelectButtonCssSelector Property

    Specifies the CSS selector of a button or an HTML element that invokes the Open dialog.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    [Parameter]
    public string ExternalSelectButtonCssSelector { get; set; }

    #Property Value

    Type Description
    String

    The CSS selector of a button or an HTML element.

    #Remarks

    Note

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

    The select button invokes the Open dialog. In this dialog, users can select files that the File Input component should upload. The following example implements a drop zone. Users can drop files into this zone or click within it to invoke the Open dialog:

    <div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 w-100 m-0">
        <span>Drag & Drop a file</span>
        <span>…or click to browse for a file instead.</span>
    </div>
    
    <DxFileInput FilesUploading="OnFilesUploading"
                 ExternalSelectButtonCssSelector="#overviewDemoDropZone"
                 ExternalDropZoneCssSelector="#overviewDemoDropZone" />
    
    @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);
            }
        }
    }
    

    Run Demo: File Input - Overview

    See Also