New to Telerik UI for Blazor? Download free 30-day trial

Validate Uploaded Files

The Blazor Upload component can perform client-side validation.

To validate uploaded files, implement the validation in two parts:

  • client validation - by the Telerik Upload component
  • server validation - in the application endpoints

The Telerik Upload component offers parameters to validate selected files on the client:

  • AllowedExtensions - a list of extensions that the user can select. Other file types will appear as invalid in the Upload UI and the component will not upload them.
  • MaxFileSize - the maximum file size in bytes. Larger selected files will be marked as invalid and will not be uploaded.
  • MinFileSize - the minimum size of a file in bytes. Smaller selected files will be marked as invalid and will not be uploaded.

Removing invalid files with the [x] button in the Upload interface will not call the RemoveUrl endpoint.

Client validation by the Telerik Upload

@* Upload Word and Excel files between 100 KB and 2 MB *@

<TelerikUpload AllowedExtensions="@ValidFiles"
               MinFileSize="@MinFileSize"
               MaxFileSize="@MaxFileSize"
               SaveUrl="/api/upload/save"
               RemoveUrl="/api/upload/remove" />

@code{
    List<string> ValidFiles { get; set; }= new List<string>() { ".docx", ".xlsx" };
    int MinFileSize { get; set; } = 100 * 1024; // 100 KB
    int MaxFileSize { get; set; } = 2 * 1024 * 1024; // 2 MB
}

The Blazor framework does not support form validation for files. We made an example that creates similar experience. Use it as base for your implementation.

File upload controllers can create application vulnerabilities. Learn about all possible security risks and how to avoid them. Do not trust any part of the upload request and implement server-side validation.

The controller methods in this documentation do not implement security measures for simplicity and brevity.

See Also

In this article