File upload

BormFieldType.File renders Blazor's InputFile, keeps the chosen IBrowserFiles on the model, and lists them back with their sizes. The browser's accept attribute is only a filter in the picker, so size and type are validated again server-side — try picking a large file or the wrong extension.

Live form

View source

@page "/files"

<BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Upload" ShowErrorSummary="true" />

@code {
    private readonly DocumentUpload _model = new();
    private BormState _state = default!;

    protected override void OnInitialized()
    {
        var schema = BormBuilder.For<DocumentUpload>()
            .Title("Send us your documents")
            .Field(x => x.Applicant, f => f.Required().Autocomplete("name"))
            .Field(x => x.Resume, f => f
                .Accept(".pdf,.doc,.docx")
                .MaxFileSize(2 * 1024 * 1024)
                .Required("Please attach your CV.")
                .Help("PDF or Word, up to 2 MB."))
            .Field(x => x.Attachments, f => f
                .Accept("image/*,.pdf", multiple: true)
                .MaxFileSize(5 * 1024 * 1024)
                .Help("Optional. Images or PDFs, up to 5 MB each."))
            .Build();

        _state = new BormState(schema, new BormModelDataAccessor(_model));
        _state.StateChanged += OnStateChanged;
    }

    private void OnStateChanged() => InvokeAsync(StateHasChanged);
}

Edit this page on GitHub