How to Preventing File Upload and Removal in Uploader Component

18 Mar 20241 minute to read

We can prevent the selected file from being uploaded and also prevent the removal of the file when the remove button is clicked on the Uploader component. The BeforeUpload event is triggered before the upload process begins, allowing us to add additional parameters to the upload request. Similarly, the BeforeRemove event is triggered when a file is being removed. This event can be used to obtain confirmation before deleting the file from the server.

With server-side API endpoint

@using Syncfusion.Blazor.Inputs
<SfUploader AutoUpload="false">
    <UploaderAsyncSettings SaveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Save"
                           RemoveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"></UploaderAsyncSettings>
    <UploaderEvents BeforeUpload="@BeforeUploadHandler" BeforeRemove="@BeforeRemovehandler"></UploaderEvents>
</SfUploader>
@code {
    private void BeforeUploadHandler(BeforeUploadEventArgs args)
    {
        // You can prevent uploading by setting "Cancel" to true.
        args.Cancel =  true;
    }
    private void BeforeRemovehandler(BeforeRemoveEventArgs args)
    {
        // You can prevent removing by setting "Cancel" to true.
        args.Cancel =  true;
    }
}

Without server-side API endpoint

@using Syncfusion.Blazor.Inputs
<SfUploader AutoUpload="false">
    <UploaderEvents BeforeUpload="@BeforeUploadHandler" BeforeRemove="@BeforeRemovehandler"></UploaderEvents>
</SfUploader>
@code {
    private void BeforeUploadHandler(BeforeUploadEventArgs args)
    {
        // You can prevent uploading by setting "Cancel" to true.
        args.Cancel =  true;
    }
    private void BeforeRemovehandler(BeforeRemoveEventArgs args)
    {
        // You can prevent removing by setting "Cancel" to true.
        args.Cancel =  true;
    }
}