1. Feedback
  2. Blazor
  3. 25191

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Remove event is not fired when we call the remove method in the Uploader

While using template with pre-load files, remove event is not fired if we call remove method manually. The same case is working fine when we browse the file from the Uploader component. 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Image_preview_Modified-27102976


Replication procedure:


1. Run the attached sample


2. Click the remove icon in the image


3. We can notice that remove event will not be fired.


4. Now, browse the image to the Uploader.


5. Now, click the remove icon.


6. We can see that remove event will be fired.



<SfUploader @ref="uploadObj" AutoUpload="true" AllowedExtensions=".png, .jpg, .jpeg">

            <UploaderFiles>

                <UploaderUploadedFiles Name="1" Size=500000 Type=".png"></UploaderUploadedFiles>

            </UploaderFiles>

            <UploaderEvents FileSelected="OnSelect" ValueChange="OnChange" OnRemove="onRemove" Created="OnCreate"></UploaderEvents>

            <UploaderTemplates>

                <Template Context="HttpContext">

                    <table>

                        <tr>

                            <td>

                                @if (files.Count > 0)

                                {

                                    <img class="upload-image" id="img" alt="Preview Image @(HttpContext.Name)"

                                         src="@((files.Where(item => item.Name == HttpContext.Name).FirstOrDefault()?.Path))">

                                }

                            </td>

                            <td>

                                <div style="padding: 7px;">

                                    <h5 title="@(HttpContext.Name)">@(HttpContext.Name)</h5>

                                    <i>@(HttpContext.Size) Bytes</i>

                                </div>


                            </td>

                        </tr>

                    </table>

                    <span class="fa fa-remove" id="removeIcon" title="Remove" @onclick="@onFileRemove"></span>

                </Template>

            </UploaderTemplates>


        </SfUploader>

    </div>


</div>


@code {


    public void OnCreate()

    {

        this.files.Add(new fileInfo() { Name = "1.png", Path = https://studyhivestorageaccount.blob.core.windows.net/filo/1.png }); // pre-load files


    }


    private void onFileRemove()

    {  // icon clik hanlder

        uploadObj.Remove(); // remove method

    }

    public async Task onRemove(RemovingEventArgs args)

    {  // remove event


        var clientlocal = ClientFactory.CreateClient("LocalApi");

        var res = await clientlocal.PostAsync("api/SampleData/Remove", content);

        // storageService.RemoveFileFromStorage(args.FilesData[0].Name);

    }

}