DxUpload.SelectedFilesChanged Event
Fires when the file list changes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public EventCallback<IEnumerable<UploadFileInfo>> SelectedFilesChanged { get; set; }
Parameters
Type | Description |
---|---|
IEnumerable<UploadFileInfo> | A collection of UploadFileInfo objects that store information about files. |
Remarks
Once a user selected or dropped a file, the Upload adds it to the file list. Users can then remove files from the list.
The SelectedFilesChanged
event occur each time the file list is changed (even if the ShowFileList property is set to false
).
The following example demonstrates how to handle this event and dynamically change the Upload’s Visible property. Use the ExternalSelectButtonCssSelector and ExternalDropZoneCssSelector properties to implement the external Select File button and drop zone container.
<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 w-100 m-0">
<svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<g id="_x32_">
<path id="_x33_" class="st0" d="M34,42H8c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h19l11,11v27C38,40.2,36.2,42,34,42z M27,4v7h7L27,4z
M34,14H24V4H8v34h26V14z" />
</g>
<g id="_x31_2"><path id="_x33__1_" class="st0" d="M28,26h-5v8h-2h-2v-8h-5l7-7L28,26z" /></g>
</svg>
<span>Drag and Drop File Here</span><span class="m-1">or</span>
<button id="overviewDemoSelectButton" class="btn border-primary btn-primary m-1">Select File</button>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
Visible="@UploadVisible"
ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
ExternalDropZoneCssSelector="#overviewDemoDropZone"
ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white"
SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>
@code {
bool UploadVisible { get; set; } = false;
protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
UploadVisible = files.ToList().Count > 0;
InvokeAsync(StateHasChanged);
}
}