FileValidation.razor

@page "/File-Upload/File-Validation"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates how to validate the files before uploading it to server. Only document files (DOC, DOCX, XLS, XLSX), and the files should contain minimum 10 KB and maximum 4 MB sizes to upload it into server. This sample limits maximum files count as 5 to upload.</p>
</SampleDescription>
<ActionDescription>
   <p>The Uploader component allows to validate the file’s type, and limit the file size using <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions' target='_blank'> AllowedExtensions</a>, <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_MinFileSize' target='_blank'> MinFileSize</a>, and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_MaxFileSize' target='_blank'> MaxFileSize</a> properties. You can also achieve limit the files count before uploading it using <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected' target='_blank'> FileSelected</a> event.</p>
   <p>For more information, you can refer to the Validation section from this <a target='_blank' href='https://blazor.syncfusion.com/documentation/file-upload/validation/'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfUploader ID="UploadFiles" DropArea=".control-fluid" AllowedExtensions=".doc, .docx, .xls, .xlsx" MinFileSize=10000 MaxFileSize=104857600>
            <UploaderEvents OnRemove="OnFileRemove"></UploaderEvents>
            <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
        </SfUploader>
    </div>
</div>

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
    }
</style>

@code {
    public void OnFileRemove(RemovingEventArgs args)
    {
        args.PostRawFile = false;
    }
}