DxFileInput.ExternalDropZoneCssSelector Property

Specifies the CSS selector of a container or HTML element where users can drop files.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[Parameter]
public string ExternalDropZoneCssSelector { get; set; }

Property Value

Type	Description
String	The CSS selector of a container or HTML element.

Remarks

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 implements an external select button and a drop zone container for the File Input component:

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/drop-file-fluent.svg");
    mask-image: url("../images/drop-file-fluent.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