DxUpload.SelectedFilesChanged Event

Fires when the file list changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.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 selects or drops a file, the Upload adds it to the file list. Users can then remove files from the list.

The SelectedFilesChanged event fires each time the file list changes (even if the ShowFileList property is set to false).

The following code snippet handles the SelectedFilesChanged 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.

Note that the code snippet uses Bootstrap classes. To render elements correctly, enable the UseBootstrapStyles option in theme settings.

Razor

@inject NavigationManager NavigationManager

<div id="overviewDemoDropZone" class="card custom-drop-zone rounded-3 w-100 m-0">
    <span class="drop-file-icon mb-3"></span>
    <span class="drop-file-label">Drag and Drop File Here</span><span class="m-1">or</span>
    <DxButton Id="overviewDemoSelectButton"
              CssClass="m-1"
              RenderStyle="ButtonRenderStyle.Primary"
              Text="Select File" />
</div>
<DxUpload Name="myFile"
          Visible="@UploadVisible"
          ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
          MaxFileSize="15000000"
          UploadUrl="@GetUploadUrl("api/Upload/Upload/")"
          SelectedFilesChanged="@SelectedFilesChanged">
</DxUpload>
<div class="upload-validation-text info-text">
    Uploads are limited to a single file up to 15 MB.
</div>

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

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

        InvokeAsync(StateHasChanged);
    }
    protected string GetUploadUrl(string url) {
        return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
    }
}

CSS

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}
.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}
.custom-drop-zone svg {
    width: 42px;
    height: 42px;
}
/*BeginHide*/::deep/*EndHide*/.custom-drop-zone > *:not(#overviewDemoSelectButton) {
    pointer-events: none;
}

/*BeginHide*/::deep/*EndHide*/.upload-validation-text {
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
 }

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