DxFileInput.ExternalDropZoneDragOverCssClass Property
Specifies the CSS class applied to the drop zone when users drag files over it.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public string ExternalDropZoneDragOverCssClass { get; set; }
Property Value
Type | Description |
---|---|
String | The CSS class applied to the drop zone when users drag files over it. |
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 a drop zone container for the File Input component:
<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