DxUpload.SelectedFilesChanged Event

Fires when the file list changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Action<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.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron">
    <svg class="drop-file-icon mb-3" role="img" style="width: 42px; height: 42px;"><use href="#drop-file-icon"></use></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/UploadFile/" 
          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);
    }
}

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;
}
.custom-drop-zone.custom-drag-over {
    background-color: #868A8D;
}
.custom-drop-zone img {
    width: 42px;
    height: 42px;
}

UploadController

using System.IO;
using System.Linq;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

[Route("api/[controller]")]
public class UploadController : ControllerBase {
    private readonly IWebHostEnvironment _hostingEnvironment;

    public UploadController(IWebHostEnvironment hostingEnvironment) {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost]
    [Route("UploadFile")]
    // "myFile" is the value of the Upload's "Name" property.
    public ActionResult UploadFile(IFormFile myFile) {
        try {
            // Specify the target location for the uploaded files.
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
            // Check whether the target directory exists; otherwise, create it.
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            using (var fileStream = System.IO.File.Create(Path.Combine(path, myFile.FileName))) {
                // Check the file here (its extension, safity, and so on). 
                // If all checks pass, save the file.
                myFile.CopyTo(fileStream);
            }
        } catch {
            Response.StatusCode = 400;
        }

        return new EmptyResult();
    }
}

Run Demo: Upload - Overview