List and Delete Preloaded Files With SfUploader

[Faruk Aksoy]

I need to list all related images in database as UploaderUploadedFiles.

I used like this to list preloaded images:

 <SfUploader @ref="UploaderObj" ID="UploadFiles" AllowedExtensions=".png" AllowMultiple="true" MaxFileSize="3145728">
 @if (SelectedRecordPics.Count > 0)
{
<UploaderFiles>
@foreach (var item in SelectedRecordPics)
{
<UploaderUploadedFiles Name="@(item.Name)" Size="@((double)item.Size)" Type="@(item.Extension)" />
}
</UploaderFiles>
 }
<UploaderAsyncSettings SaveUrl=@($"api/resim/Save/{pd.ID}")></UploaderAsyncSettings>
<UploaderEvents OnRemove="@onRemove"></UploaderEvents>
</SfUploader>

privatevoid onRemove(RemovingEventArgs args)
{
}

and all the files listed successfully.

Now I want to delete only selected file in the list and I use <UploaderEvents OnRemove> section but this makes all files passed via RemovingEventArgs. Because of this I can not delete which I selected file only. I cannot find which file was selected

[Kokila Poovendran]

Hi Faruk Aksoy,

We have validated the reported query on our end. Unfortunately, we weren’t able to reproduce the reported issue as per your scenario.

Also, we request that you provide additional details about the issue, as mentioned below. This will help us validate the issue further and provide you with a better solution.

• Issue a reproducible sample (or modify the shared sample as per your scenario).
• Your Syncfusion package version.

Attachment: BlazorServerProject_72ccec34.zip

[Nitin Pawar]

We need to bind the file ID in a hidden field so can we can easily delete the files by ID. Currently, as in the example shown above we have only a filename but we need an id also. In our table, we have stored filename with ResourceId to identify file easily.

[Yohapuja Selvakumaran]

Hi Nitin Pawar,

Thank you for your patience and understanding. We have validated your requirement and have added the ID to the preloaded file in the BeforeRemove event. Please find the sample and the relevant code snippet below for your reference.

Code Snippet:

 

<div class="col-lg-12">

    <div class="col-lg-8 control-section sb-property-border">

        <div class="control-wrapper">

            <SfUploader @ref="UploaderObj">

                <UploaderFiles>

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

                    <UploaderUploadedFiles Name="TypeScript Succinctly" Size=12000 Type=".pdf"></UploaderUploadedFiles>

                    <UploaderUploadedFiles Name="ASP.NET Webhooks" Size="500000" Type=".docx"></UploaderUploadedFiles>

                </UploaderFiles>

                <UploaderAsyncSettings SaveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Save" RemoveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"></UploaderAsyncSettings>

                <UploaderEvents BeforeRemove="@OnBeforeRemove"></UploaderEvents>

            </SfUploader>

        </div>

    </div>

</div>

 

 

@code {

public SfUploader UploaderObj;

 

private void OnBeforeRemove(BeforeRemoveEventArgs args)

{

    string fileName = System.IO.Path.GetFileNameWithoutExtension(args.FilesData[0].Name);

    string uniqueGUID = Guid.NewGuid().ToString();

    string newId = $"{fileName}_{uniqueGUID}";

    args.FilesData[0].Id = newId;

    args.CustomFormData = new object[] { new { Id = args.FilesData[0].Id } };

    Console.WriteLine(args.FilesData[0].Id);

}

}

 

 

 

API Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeRemove

Kindly check out the sample for further reference:

Sample: https://blazorplayground.syncfusion.com/LXBJNmijppWvQEOA

Regards,

Yohapuja S