Validate Uploaded Files

Files must be validated when uploading, and the process has two parts:

  • client validation - performed by the Telerik Upload component
  • server validation - must be implemented in the application endpoints

The Telerik Upload component offers parameters to validate the file selection on the client:

  • AllowedExtensions - a list of extensions that the user can select. Choosing different files will mark them as invalid in the UI and will not upload them.
  • MaxFileSize - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI and will not upload.
  • MinFileSize - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI and will not upload.

Removing invalid files from the [x] button in the UI will not call the RemoveUrl handler.

Client validation in the Telerik Upload component

For brevity, this sample does not showcase a controller that consumes these files. You can find an example in the Upload Overview article.

@* Some images are only allowed, min size 1KB, max size 2MB
    This sample does not showcase a controller that consumes these files for brevity
    For such an example see https://docs.telerik.com/blazor-ui/components/upload/overview
*@

<TelerikUpload AllowedExtensions="@( new List<string>() { ".jpg", ".png", ".jpeg" } )"
               MaxFileSize="2048000"
               MinFileSize="1024"
               SaveUrl="@uploadHandler" RemoveUrl="@removeHandler" />

@code{
    string uploadHandler = "/api/upload/save";
    string removeHandler = "/api/upload/remove";
}

Valid and Invalid files

Valid and Invalid files uploaded

Form validation for files is not supported in the framework at this point, see the following issue: https://github.com/dotnet/aspnetcore/issues/18821. We made an example that creates similar experience in the following repo, so you can use it as base for your implementation: https://github.com/telerik/blazor-ui/tree/master/upload/form-validation

Validation and security must be implemented in the endpoint handlers (controllers). Requests for them can be forged or manipulated and it is up to the application to ensure its security.

See Also

In this article
Not finding the help you need? Improve this article