BlazorUI Demo

Files and validation

Drag-and-drop file input and a themed summary for standard EditForm validation.

File input
Drop files here or choose files
Selected files: 0
View code 
<BuiFileInput Multiple MaximumFiles="4" Accept="image/*,.pdf" FilesChanged="OnFilesChanged" />
<BuiText Typo="Typo.Caption">Selected files: @fileCount</BuiText>

@code {
    private int fileCount;
    private void OnFilesChanged(IReadOnlyList<IBrowserFile> files) => fileCount = files.Count;
}
Validation summary
View code 
<EditForm Model="model" FormName="validation-doc" OnValidSubmit="Save"><DataAnnotationsValidator /><BuiValidationSummary />
    <BuiTextField @bind-Value="model.Name" Label="Required name" />
    <BuiButton Type="ButtonType.Submit">Validate</BuiButton>
</EditForm>

@code {
    private ValidationModel model = new();
    private Task Save() => Task.CompletedTask;
    private sealed class ValidationModel { [Required] public string? Name { get; set; } }
}