Customize File Upload

[Razvan]

I am using the File Upload control in Blazor. I am using it with AllowMultiple="true" AutoUpload="false". Also, I am uploading the files in Chunks and I have provided a SaveUrl.

I would like to know if it is possible:

1) Once a file is uploaded successfully for it to be automatically removed from the file list.

2) Is there a handler for when all the files have been uploaded?

---

More specifically my scenario is the following: I am uploading multiple files. I don't want the user to be able to remove the files using the FileUploader (I don't want them to be see the Delete \ Thrash icon). When all the files have finished uploading, I want to clear all the entries in the file uploader and take some action.

[Kokila Poovendran]

Hi Razvan,

Greetings from Syncfusion support!

Thank you for reaching out to us with your queries regarding the File Upload control in Blazor. We've carefully reviewed your questions and prepared responses along with sample code snippets to address your concerns.

We have reviewed you query and have prepared the sample below. Please check the below answers. 

Query 1: Once a file is uploaded successfully for it to be automatically removed from the file list.

In the provided code snippet, we have a button named "Clear All" that, when clicked, calls the ClearAllAsync method of the SfUploader component. This method will programmatically remove all files from the file list. If you want to automatically remove a file from the list once it is uploaded successfully, you can invoke this method in the "Success" event of the uploader

ClearAllAsync Method Documentation:
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync


Query 2:  Is there a handler for when all the files have been uploaded?

Yes, the "ActionComplete" event triggers once all the files are uploaded successfully or failed. You can utilize this event as shown below:

For more details, you can refer to the documentation: OnActionComplete Event

 

<SfButton @onclick="@ClearFiles">Clear All</SfButton>

 

<SfUploader ID="UploadFiles" @ref=UploaderObj AllowMultiple="true" AutoUpload="false">

    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove">

    </UploaderAsyncSettings>

    <UploaderEvents OnActionComplete="ActionCompleteHanlder"></UploaderEvents>

 

</SfUploader>

 

 

@code{

    public SfUploader UploaderObj;

    private void ClearFiles()

    {

        this.UploaderObj.ClearAllAsync();

    }

 

    private void ActionCompleteHanlder()

    {

        // This event will trigger once all the files are uploaded successfully or failed

    }

}

Attachment: BlazorServerProject_14704dc2.zip