Regarding sample for multiple file uploads

[Pratik]

Hello,

I have a problem. Following is my screen... As you can see there is plus button sign. Everytime it is clicked  a new Syncfusion file uploader should be generated. I did that part. Now the issue is that whenever i click minus button sign of any entry only the last entry gets deleted. So Say, I clicked plus sign three times which means 3 file uploader are added. If I click the minus sign  middle one i.e.2nd one out of 3 or first one out of 3, the last one i.e.3rd one gets deleted.

Here is my part of code:-

 @for (int i = 0; i < UploadCount; i++)
                    {
                        var localVariable = i;
                        <SfUploader @ref="UploadFiles[localVariable]" DropArea=".control-fluid">
                        </SfUploader>
                        <SfButton IconCss="e-btn-sb-icons " CssClass="e-small e-flat" IsPrimary="true" OnClick="@(e => SubtractUploadButtonClick(localVariable))"></SfButton>
                    }

 private void AddUploadButtonClick()
            {
                UploadCount += 1;
                UploadFiles.Add(new SfUploader());
                //StateHasChanged();
            }
            private void SubtractUploadButtonClick(int index)
            {
                UploadCount -= 1;
                for (int i = UploadCount; i < UploadFiles.Count; i++)
                {
                    UploadFiles.RemoveAt(index);
                    LstUploadFiles.Remove(index);
                }
            }

private List<SfUploader> UploadFiles = new List<SfUploader>();

Could I please have a sample in blazor regarding this?

[Sevvandhi Nagulan]

Hi Pratik, 

Greetings from Syncfusion support. 

We are faced with the complexity of making a sample using a shared code. So please provide all the value of the variable declaration. If possible, provide an example of the full code or share the razor file. This will help us to check and find a solution at our end. 

Regards, 

Sevvandhi N 

[Pratik]

Please check the attached file

Attachment: AuctionPageCreate_a7c9ffa6.zip

[Sevvandhi Nagulan]

Hi Pratik, 

Thanks for the update. 

We checked the reported requirement to delete the corresponding uploader when the remove button is pressed. We would like to inform you that we were unable to access the DOM elements in the blazor. So, we used the JSInterop to meet the requested requirement. 

In the example below, we bind the event click in the JSinterop and use the target in the event click argument to get the parent element and remove the element from the DOM. Please refer to the code below, 

<div class="form-group"> 

    Files 

    <SfButton IconCss="e-btn-sb-icons e-add-icon" CssClass="e-small e-flat" IsPrimary="true" OnClick="@AddUploadButtonClick">Add</SfButton> 

    @for (int i = 0; i < UploadCount; i++) 

    { 

        var localVariable = i; 

 

 

<div>  // added the additional div element for the uploader and button element  

    <SfUploader @ref="UploadFiles[localVariable]" DropArea=".control-fluid"> 

        <UploaderEvents OnRemove="OnFileRemove" OnActionComplete="@(e => OnFileUploadEventChange(localVariable, e))"></UploaderEvents> 

    </SfUploader> 

    <br /> 

    @if (UploadCount > 0) 

    { 

        <SfButton @ref="buttonObj" IconCss="e-btn-sb-icons" CssClass="e-small e-flat" IsPrimary="true" Created="onCreated">Remove</SfButton> 

    } 

</div> 

    } 

 

</div> 

public void onCreated() 

    { 

        JSRuntime.InvokeVoidAsync("OnRemove", buttonObj.ID); 

    } 

 

[upload.js] 

 

window.OnRemove = (Id) => { 

    document.getElementById(Id).ej2_instances[0].element.addEventListener('click', function (e) { 

 

        e.target.parentElement.remove(); 

    }) 

} 

 

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App-496232849 

 

 

Kindly check the above sample and get back to us if you need any other further assistance. 

Note: If you delete the uploader by clicking the Remove button, you can see in the UI that only the last uploader has been removed. It's because the DOM components are displaced immediately. So, if you want to see the weather corresponding uploading removed or not, follow the steps below. 

1.       Place the debugger within the Remove function  

2.       Click F10 to execute code one by one.  

3.       You can see that the corresponding file is deleted 

Regards, 

Sevvandhi N