Question

I’m using the Telerik Extensions for ASP.NET MVC 3 and I’m having a problem with the Upload control. I would like to have multiple upload controls on the same page (I’m asking for an image and a sound file, for example). The problem is, only the first Upload control works. Any others on the page render fine, and clicking on them still brings up the file selection dialog, but none actually responds except the first one.

Telerik doesn’t seem to be reporting any errors in the console or anything, it just simply doesn’t work. Is there something specific I have to do to allow multiple upload controls on one page?

To demonstrate, this is the broken code that doesn’t work:

@(Html.Telerik().Upload()
    .Name("attachments")
    .Async(async => async.Save("Save", "Resource").AutoUpload(true))
    .ClientEvents(events => events
        .OnSuccess("ItemImageOnSuccess")
        .OnError("ItemImageOnError")
    )
)

@(Html.Telerik().Upload()
    .Name("attachments")
    .Async(async => async.Save("Save", "Resource").AutoUpload(true))
    .ClientEvents(events => events
        .OnSuccess("ItemSoundOnSuccess")
        .OnError("ItemSoundOnError")
    )
)

The second upload field is rendered properly, but does not work.

Answer 1

For anyone else who comes across a similar issue, I managed to solve it myself.
My issue was that I had all upload controls on the page with the same name, which in turn gave them the same id, so all of Telerik’s javascript would only work on the first Upload control. The fix is obvious: Change the names.

However, this introduced a new issue, because all the Upload controls I was using pointed to the same function, and in changing the name of the control, the parameter did not map correctly any more and I was just getting a null file list. To fix this issue, I needed to add an extra parameter to the .Save() function to tell it the field name.

Here is the fix for my code above:

@(Html.Telerik().Upload()
    .Name("ImageUpload")
    .Async(async => async.Save("Save", "Resource", "attachments").AutoUpload(true))
    .ClientEvents(events => events
        .OnSuccess("ItemImageOnSuccess")
        .OnError("ItemImageOnError")
    )
)

@(Html.Telerik().Upload()
    .Name("SoundUpload")
    .Async(async => async.Save("Save", "Resource", "attachments").AutoUpload(true))
    .ClientEvents(events => events
        .OnSuccess("ItemSoundOnSuccess")
        .OnError("ItemSoundOnError")
    )
)