How to invoke clear button click event after files are uploaded

[Fritz]

Hi. I am using the FileUpload component with AutoUpload=false.

I am handing the event when the user clicks on Upload to show some progress and post-upload messages.

However, once this is done, I want to automatically clear the upload display, as if the user pressed "Clear". So the workflow would be:

1. User selects file(s)
2. User clicks the Upload button
3. Upload event is handled
4. Upload, Clear and Delete buttons are automatically hidden and the Upload control goes back to its original display state

Can you please show me how to achieve this? 

Many thanks!

[Sureshkumar P]

Hi Fritz,

You can achieve your requirement by using the OnClear event in our component. Find the code example below.

<SfUploader ID="UploadFiles" >

                <UploaderEvents FileSelected="onFileSelect" ValueChange="LoadFilesSf" OnClear="fileClearEvent"/>

            </SfUploader>

 

@code {

 

    private void fileClearEvent(ClearingEventArgs args)

    {

       

    }

}

To know more about onclear event, please refer to the API documentation link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnClear

Regards,

Sureshkumar P

[Fritz]

Thanks Sureshkumar for your response. However, I think you have just explained to me how to link and write an event for when the Clear button is clicked.

What I want is for the Delete and Clear buttons to be hidden after the Upload button is clicked. How do I do this programattically?

Many thanks for your help.

[Sureshkumar P]

You can achieve your requirement with a custom CSS style using the CssClass property.

Find the code example here:

<SfUploader ID="UploadFiles" CssClass="@CustomClass" >

                <UploaderEvents Success="fileClearEvent"/>

            </SfUploader>

 

<style>

    .customCSS.e-upload .e-upload-files .e-file-delete-btn.e-icons {

        display: none;

    }

</style>

 

 

@code {

   

    public string CustomClass{ get; set; }

 

     private void fileClearEvent(SuccessEventArgs args)

    {

        this.CustomClass = "customCSS";

    }

}

[Fritz]

Thanks again Sureshkumar. Unfortunately, your solution does not compile, as shown below:

[Sureshkumar P]

You need to change the fileClearEvent methods event argument type as SuccessEventArgs instead of ClearingEventArgs to get rid of the facing issue.

Find the code example here:

 private void fileClearEvent(SuccessEventArgs args)

    {

        this.CustomClass = "customCSS";

    }

 

[Fritz]

It is compiling now but still not showing the behaviour I want to see. The closest I can get is to set Autoupload = true, but then still after the file is uploaded, the control looks like this:

What I would like to see, is for it to look like this:

In other words, after the file is uploaded, I want to upload control to go back automatically (or by means of code) to its original state every time.

[Sureshkumar P]

As per your requirement, we suggest you call the ClearAllAsync public method after the upload file is successfully uploaded using the success event.

Find the code example here:

<div class="container-lg">

    <div class="row">

        <div class="col">

            <p>Not working</p>

            <SfUploader ID="UploadFiles" @ref="UploadObj" >

                <UploaderEvents  ValueChange="LoadFilesSf" Success="fileClearEvent"/>

            </SfUploader>

        </div>

    </div>

</div>

 

 

@code {

    SfUploader UploadObj;

    private void fileClearEvent(SuccessEventArgs args)

    {

        this.UploadObj.ClearAllAsync();

    }

 

    public async void LoadFilesSf(UploadChangeEventArgs args)

    {

        Console.WriteLine("Upload triggered");

       foreach (var file in args.Files)

        {

            var path = @"path" + file.FileInfo.Name;

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

            file.Stream.WriteTo(filestream);

            filestream.Close();

            file.Stream.Close();

        }

 

    }

}

To know more about the clearAllAsync public method, please refer to the API documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync

[Fritz]

Thanks Sureshkumar, at long last this is the solution I was looking for!

Thanks for persisting with your excellent support. I hope this thread will be useful to some of your other users too.

[Prince Oliver]

Most Welcome, we are glad to help you.

[Scott Hunley]

This solution is good, but it also clears the file uploads that failed.  Is there a way to just clear those that succeeded and not the ones that failed?

Thanks,

-Scott

[Priyanka Karthikeyan]

Hi Fritz,

 

If you need to remove only the successfully uploaded files, you can utilize the RemoveAsync method and pass the successfully uploaded files inside the ValueChange event. Please refer to the code snippet and sample below for your reference.

 

 

public async void LoadFilesSf(UploadChangeEventArgs args)

 

{

    foreach (var file in args.Files)

    {

       ............
        if (file.FileInfo.Status == "File uploaded successfully")
        {
            await this.UploadObj.RemoveAsync(new Syncfusion.Blazor.Inputs.FileInfo[] { file.FileInfo });
        }

    }

}

 

Sample: https://blazorplayground.syncfusion.com/embed/htrTtHCNeLBzKDLm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

API Reference: ⁠RemoveAsync

 

Regards,

Priyanka K