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:
-
Accept-string- not validation per se, but this parameter can instruct the browser what file types to allow users to select. -
AllowedExtensions-List<string>- a list of valid file extensions. Choosing other file types will mark them as invalid in the UI. Its default is an empty list, which allows all extensions. -
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.