Blazor form validation of a file field

[Stamo-Gochev]

What is the expected way of handling validation of a form field that is of type <input type="file">? Suppose that the form is bound to a model that has such a field and the form should display a validation message, when certain criteria is nto met, e.g. the file size exceeds a limit or the file has an invalid extension. Furthermore, what is the expected type of the model field that corresponds to <input type="file"> as things like IFormFIle

<EditForm
          OnSubmit="@HandleSubmit"
          EditContext="@_editContext">
    <DataAnnotationsValidator />
    <ValidationSummary />

	<p>
		<input type="file"  @bind-value="_starship.File" />
	</p>

	<button type="submit">Submit</button>
</EditForm>


@code {
	private Starship _starship = new Starship();

	private EditContext _editContext;

	protected override void OnInitialized()
	{
		_editContext = new EditContext(_starship);
	}


	private async Task HandleSubmit()
	{
		...
	}


	public class Starship
	{          
		// custom validation attribute
		[AllowedExtensionsAttribute(new string[] { ".txt" })]
		public IFormFile File { get; set; }
	}
}

fail with an exception (this is expected, but what should be the correct type):

The type 'Microsoft.AspNetCore.Http.IFormFile' does not have an 
associated TypeConverter that supports conversion from a string. 
Apply 'TypeConverterAttribute' to the type to register a converter.

Currently, there isn't a built in <InputFile> component and the blog post from @SteveSandersonMS doesn't mention form validation. In addition, will there be any built-in support for anti-forgery tokens as it is the case with MVC forms or should this be manually handled by the developer?

Will there be a difference whether wasm or server-side blazor is used?

Additional context

Building a custom <InputFile> component requires some type of validation when used in a form. Using a fully custom validation, e.g. manually displaying a message is possible, but this does not work with validation attributes at all.

[pranavkm]

Hi @Stamo-Gochev, IFormFile is not not part of the Blazor programming model and is not supported in the context of a Blazor component. You'll have to use JSInterop to read the file extension and apply your own validation.

[mrpmorris]

The OnChange event of InputFile will give you an object as a parameter that will give you access to the filename etc.

[Stamo-Gochev]

@mrpmorris My question was more about "built-in" support for validation attributes in model fields. Metadata about the file can be obtained manually.

[javiercn]

There a new InputFile component in 5.0 that is recommended for use in this case

[keraxel]

@javiercn Is there a way to apply validation attributes on InputFile? The component does not seem handle data binding.