Problem with SfUploader.ID

[Mike-E]

Hello Team,

I am having a complicated problem with SfUploader that I am hoping I can get some insight on.  To start, I have a Razor file that looks like this:

Please note the `ID`.

On the Controller I have the following:

Now, in the page that I am having trouble on, I have multiple SfUploader controls and they all use the same ID.  This seems to violate HTML5 specification, but surprisingly they all work as expected.

The problem starts when I update the view to remove an existing SfUploader and replace it with two new ones.  I have recorded this for your review here:

https://i.imgur.com/at28r1l.gif

You should see that one SfUploader exists, and then after the dropdown selecting "Illustrated Text" two SfUploaders are present.  I am able to use the first one successfully, but when I press the "Browse..." of the second one, nothing happens. 💥

As I said it's a little complicated, but I am hoping the video is enough to help illustrate what is happening.

Please note that if I change the ID="somethingelse" on the second SfUploader (and leave the first one be ID="files") pressing "Browse..." works. ✅

Is there a way to change the "files" parameter name to be more flexible on the API Controller?  That would help fix my problem here.

Please let me know if any further information is needed and I will assist you with it.

Thank you for all that you do out there.

[Yaswin Vikhaash Rajaretenam]

Hi Mike-E,

Thank you for reaching out to us. We understand the issue you are facing when using multiple SfUploader components with the same ID.

To ensure proper functionality, we recommend setting a unique ID for each uploader instance while keeping the name property consistent across them. When the name attribute is not explicitly defined, both the ID and name will default to the same value, which could lead to unexpected behavior. Defining the name attribute same and ID separately will help resolve this issue.

Please find the code reference and a sample demonstrating the correct approach:

Code 

            <SfUploader @ref="UploadObj" AutoUpload="SetAutoUpload" SequentialUpload="SetSequentialUpload" HtmlAttributes="@htmlattribute">

                <UploaderEvents OnRemove="OnFileRemove"></UploaderEvents>

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

            </SfUploader>

Code {

    Dictionary<string, object> htmlattribute = new Dictionary<string, object>()

        {

           { "name", "file-uploader" }

        };

 

}

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

Regards,

Yaswin Vikhaash

[Mike-E]

That did it!  Thank you very much @Yaswin for that.  That fixed it perfectly.  I greatly appreciate you taking the time to provide the guidance.  Have a great day. 👍

[Shereen Shajahan]

Hi Mike-E,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen