DxUpload.SelectedFilesChanged Event

Fires when the file list changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

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 handles 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.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light">
    <span class="drop-file-icon icon-margin"></span>
    <span>Drag and Drop File Here</span><span class="margin-style">or</span>
    <DxButton Id="overviewDemoSelectButton"
              CssClass="margin-style"
              RenderStyle="ButtonRenderStyle.Primary"
              Text="Select File" />
</div>

<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          Visible="@UploadVisible" 
          ExternalSelectButtonCssSelector="#overviewDemoSelectButton" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
          SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>

@code {
    bool UploadVisible { get; set; } = false;

    protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
        UploadVisible = files.ToList().Count > 0;
        InvokeAsync(StateHasChanged);
    }
}

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;
    margin: 0;
    width: 100%;
    border-radius: var(--dxds-border-radius-80);
}
.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}
.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;
    -webkit-mask-image: url("../images/icons/drop-file.svg");
    mask-image: url("../images/icons/drop-file.svg");
}
.icon-margin {
    margin-bottom: 1rem;
}
.drag-zone {
    color: var(--dxds-color-content-neutral-default-rest);
}
.margin-style {
    margin: 0.25rem;
}

UploadController

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace BlazorDemo.AspNetCoreHost;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase {
    [HttpPost("[action]")]
    public ActionResult Upload(IFormFile myFile) {
        try {
            // Write code that saves the 'myFile' file.
            // Don't rely on or trust the FileName property without validation.
        } catch {
            return BadRequest();
        }
        return Ok();
    }
}

Run Demo: Upload - Overview