question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blazor form validation of a file field

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Stamo-Gochevcommented, Feb 12, 2020

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

0reactions
Keraxelcommented, Oct 10, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

ASP.NET Core Blazor forms and input components
Field validation is performed when the user tabs out of a field. During field validation, the DataAnnotationsValidator component associates all ...
Read more >
Validation in Blazor File Upload Component
The validation happens when you specify value to inline attribute to accept the original input element. SaveUrl and RemoveUrl actions are explained in...
Read more >
Blazor Forms and Form Validation (Built-in & Custom)
This blog explains how to create a student registration form in a Blazor WebAssembly app and add a custom form validator for Business...
Read more >
Blazor Upload Validation - Documentation - Telerik
Validate Uploaded Files. The Blazor Upload component can perform client-side validation. To validate uploaded files, implement the validation in two parts:.
Read more >
Blazor form validation to readonly fields
Any ideas how I can protect the application from manual input but at the same time make the validation work?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found