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.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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:

Razor

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

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;
}

Run Demo: File Input - Overview