Blazor File Input — Customize File List and Display Custom Error Messages

This example customizes the DevExpress Blazor File Input component as follows:

• Implements a custom file list UI to replace the built-in file list.
• Adds custom file processing: displays upload state and corresponding buttons, and upload errors with custom messages.

Configure a File Input Component

See Index.razor.

The main application page displays two components:

• A Simulate Error button used to toggle simulation of a custom upload error.
• A DxFileInput component:
  • The ShowFileList property is set to false to hide the built-in file list.
  • The SelectedFileChanged event is handled to display a custom file list.
  • The FilesUploading event is handled. The handler calls the ProcessFile method to simulate file upload, catch custom exceptions, and display exception messages.

<DxButton Click="() => SimulateError = !SimulateError">
    Simulate Error: @SimulateError
</DxButton>

<DxFileInput @ref="FileInput"
             AllowMultiFileUpload="true"
             UploadMode="UploadMode.OnButtonClick"
             ShowFileList="false"
             SelectedFilesChanged="OnSelectedFilesChanged"
             FilesUploading="OnFilesUploading"
             SelectButtonText="Choose files"
             CssClass="flex-column"
             MaxFileSize="1_000_000_000">
    <CascadingValue Value="FileInput" Name="FileInput">
        <FileInputList Entries="entries" />
    </CascadingValue>
</DxFileInput>

Create a Custom File List Component

See FileInputList.razor.

The FileInputList component replaces the built-in file list. It displays file names, upload states, state-specific buttons (Upload, Reload, Cancel, Remove all), and custom exception messages.

<div class="custom-upload-container">
    <div class="custom-upload-file-list-view" aria-live="polite">
        @foreach (var entry in Entries) {
            // Your markup to display files in a file list
        }
    </div>
</div>

@code {
    [Parameter]
    public IEnumerable<FileInputListEntry> Entries { get; set; } = Enumerable.Empty<FileInputListEntry>();
    // ...
}

The component uses FileInputListEntry.cs to store information about each file, including its upload state and error message.

public class FileInputListEntry {
    public required UploadFileInfo UploadInfo { get; init; }
    public IFileInputSelectedFile? SelectedFile { get; set; }

    public string Name => UploadInfo.Name;
    public string Guid => UploadInfo.Guid;
    public int Size => (int)UploadInfo.Size;

    public int BytesRead { get; set; }
    public string? ErrorMessage { get; set; }
    public byte[]? Data { get; set; }

    public UploadState State() => (
        SelectedFile is null ? UploadState.NotStarted :
        !String.IsNullOrEmpty(ErrorMessage) ? UploadState.Error :
        BytesRead < Size ? UploadState.InProgress :
        UploadState.Success
    );
}

Documentation

• Blazor File Input

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)