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

FileSelect - Selected Files Validation

If you want to validate the selected files, you should implement the validation in two parts:

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

The Telerik FileSelect component offers parameters to validate the file selection 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.
  • MinFileSize- int? - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI.
  • MaxFileSize- int? - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI.

Client validation in the Telerik FileSelect component

For brevity, this sample does not showcase actual upload of the files. You can find an example in the FileSelect Events article.

@* Some images are only allowed, min size 1KB, max size 4MB *@

<div style="width:300px">
    <TelerikFileSelect AllowedExtensions="@AllowedExtensions"
                       MinFileSize="@MinSize"
                       MaxFileSize="@MaxSize">
    </TelerikFileSelect>
    <div class="k-form-hint">
        Expected files: <strong> JPG, PNG, JPEG </strong> between <strong>1KB</strong> and <strong>4MB</strong>.
    </div>
</div>

@code {
    public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".jpeg" };

    public int MinSize { get; set; } = 1024;

    public int MaxSize { get; set; } = 4 * 1024 * 1024;
}

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