[Solved] multiple upload controls in grid do not work

[Sorina]

Hi,
I need to have a grid where for each row I should have an upload control.

The code looks like:

 columns.Template(o =>
            {%>
               <%=Html.Telerik().Upload()
               .AssetKey(o.Course.Aktivitetskode)                             
                .Name("attachments")
                .Multiple(true)
                .Localizable("Da")
                .HtmlAttributes(new { @class = "myCustomClass"})               
                .Async(async => async
                    .Save("Save", "Enrollment", new {folderPath = o.Documentation.FolderPath, courseActivityCode=o.Course.Aktivitetskode })
                    .Remove("Remove", "Enrollment", new { folderPath = o.Documentation.FolderPath })
                    .AutoUpload(true)
                )%>
            <% });

The Save method signature looks like:

 public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments, string folderPath, string courseActivityCode)

The upload works fine for the first upload control, but when I press on the second, after I select the files, nothing happens.
I figured out that this is due to the fact that all the controls get generated with the same name and id.
If I change the name of the upload control from .Name("attachments") into .Name("attachments" + counter++), when the save method gets invoked, the attachments is set to null, so I cannot retrieve the files. If I create a Save method for each row, with the first parameter named exactly as each upload control, it works, but I do not have a fixed max number of rows, so this is not a solution.

How shall I implement it to get it working?

Cheers,
Sorina

[T. Tsonev]

Hi Sorina,

You have a valid point here. The Upload should make it easier to override the Save action parameter name. We'll address this in a feature release by adding an extra parameter to the Save configuration method.

For the moment you can use the following, admittedly ugly, workaround:

Html.Telerik().Upload()
.Name("attachments" + counter++)
// ...
.ClientEvents(ce => ce
    .OnLoad("setUploadName")
)

<script type="text/javascript">
    var PARAM_NAME = "attachments";
    function setUploadName() {
        var uploadElement = $("input", this).attr("name", PARAM_NAME);
        setTimeout(function() {
            uploadElement.data("tUpload").name = PARAM_NAME;
        }, 0);
    }
</script>

The setTimeout is necessary because of an unrelated bug in the Upload that we'll also try to resolve.

I hope this helps. Greetings,
Tsvetomir Tsonev
the Telerik team

[Charley]

Thanks for a response to my original post on Sept 26.  I tried your fix the client side works perfectly but when I post to the controller the IEnumerablelist of HttpPostedFileBasestill is null.  Thanks for the response.

[Sorina]

Hi Tsvetomir,

Thanks a lot for the solution!
I used to read the file related information from Request.Files but your solution is nicer.

Best regards,
Sorina

[T. Tsonev]

Hi ,

That's strange - the workaround still works for me. But let's forget about it. The Q3 Beta release contains the necessary overload to set the parameter name explicitly:

<%= Html.Telerik().Upload()
        .Name("attachments")
        .Async(async => async
            .Save("Save", "Upload", "files")
            .Remove("Remove", "Upload")
        )
%>

Here, the Save action should receive a files parameter. Kind regards,
Tsvetomir Tsonev
the Telerik team

[Sorina]

Hi Tsvetomir,

Your workaround works for me too.
But I am happy to hear that the latest release has the proper overload method.
Thanks a lot!

Cheers,
Sorina