[Solved] A way to have more than one upload control in a view

[Stéphan Parrot]

Hi people,
     Ok, I'm trying something very simple here:

I have this entity:

public class ContentMetaData
{

    [Required]
    [StringLength(50)]
    [DataType(DataType.Text)]
    public string Tag { get; set; }

    [Required]
    [StringLength(50)]
    [DataType(DataType.Text)]
    public string TitleFr { get; set; }

    [Required]
    [StringLength(50)]
    [DataType(DataType.Text)]
    public string TitleEn { get; set; }

    [Required]
    [StringLength(1000)]
    [DataType(DataType.MultilineText)]
    public string DescriptionEn { get; set; }

    [Required]
    [StringLength(1000)]
    [DataType(DataType.MultilineText)]
    public string DescriptionFr { get; set; }

    [Required]
    [StringLength(800)]
    [DataType(DataType.Url)]
    [UIHint("upload")]
    public string MediaUrlFr { get; set; }

    [Required]
    [StringLength(800)]
    [DataType(DataType.Url)]
    [UIHint("upload")]
    public string MediaUrlEn { get; set; }
}

Now, I have an editor template named Content.cshtml which is displayed when I click Add New Record on a toolbar grid button which is set in Popup Mode. I also have an editor template for the upload control which is named upload.cshtml.
The upload editor template is as follow:

@(Html.Telerik().Upload()
      .Name("upload")
      .Multiple(false)
          .Async(async => async.AutoUpload(true)
          .Save("UploadMedia", "Contents")
          .Remove("RemoveMedia", "Contents"))
          .ClientEvents(e=>
              e.OnUpload("onUpload")
              .OnError("onError"))
)

As you can see above in my entity class, I use the UIHint attribute to specify that it needs to use the upload view to render an upload control.
Now, the Content.cshtml is as follow:

@model KimpexWCM.Web.WcmServices.Content
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Id)
@Html.HiddenFor(model => model.Created)
@Html.HiddenFor(model => model.CreatedBy)
<div>
    <div class="verticaldiv">
        <div class="editor-label">
            @Html.LabelFor(model => model.Site)
        </div>
        <div class="editor-field field">
            @Html.DropDownListFor(model => model.Site.Id, new SelectList(ViewBag.SiteList, "Id", "Name", ViewBag.SelectedSite))
            @Html.ValidationMessageFor(model => model.SiteId)
        </div>
    </div>
    <div class="box">
        <div class="editor-label">
            @Html.LabelFor(model => model.Tag)
        </div>
        <div class="editor-field field">
            @Html.EditorFor(model => model.Tag)
            @Html.ValidationMessageFor(model => model.Tag)
        </div>
    </div>
</div>
<div class="box">
    @(Html.Telerik().TabStrip()
        .Name("languageTab")
        .Items(items =>
        {
            items.Add().Text("Français")
                .Content(@<text>
    <fieldset>
        <legend>Content</legend>
        <div>
            <div class="verticaldiv">
                <div class="editor-label">
                    @Html.LabelFor(model => model.TitleFr)
                </div>
                <div class="editor-field field">
                    @Html.EditorFor(model => model.TitleFr)
                    @Html.ValidationMessageFor(model => model.TitleFr)
                </div>
            </div>
            <div class="verticaldiv">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MediaUrlFr)
                </div>
                <div class="editor-field field">
                    @Html.EditorFor(model => model.MediaUrlFr)
                    @Html.ValidationMessageFor(model => model.MediaUrlFr)
                </div>
        </div>
        <div class="box">
            <div class="editor-label">
                @Html.LabelFor(model => model.DescriptionFr)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.DescriptionFr, "rtb", new { rows = 5, columns = 85 })
                @Html.ValidationMessageFor(model => model.DescriptionFr)
            </div>
        </div>
    </fieldset>
    </text>);
            items.Add().Text("English")
                .Content(
    @<text>
    <fieldset>
        <legend>Content</legend>
        <div>
            <div class="verticaldiv">
                <div class="editor-label">
                    @Html.LabelFor(model => model.TitleEn)
                </div>
                <div class="editor-field field">
                    @Html.EditorFor(model => model.TitleEn)
                    @Html.ValidationMessageFor(model => model.TitleEn)
                </div>
            </div>
            <div class="verticaldiv">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MediaUrlEn)
                </div>
                <div class="editor-field field">
                    @Html.EditorFor(model => model.MediaUrlEn)
                    @Html.ValidationMessageFor(model => model.MediaUrlEn)
                </div>
            </div>
        </div>
        <div class="box">
            <div class="editor-label">
                @Html.LabelFor(model => model.DescriptionEn)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.DescriptionEn, "rtb", new { rows = 5, columns = 85 })
                @Html.ValidationMessageFor(model => model.DescriptionEn)
            </div>
        </div>
    </fieldset>
    </text>);
        }).SelectedIndex(0))
</div>

My problem is that when I use the upload control on the Francais tab, it uploads fine and show the name of the uploaded file but if I try the same in the English tab, nothing happens...
Am I doing something wrong? Is this achievable?

Thanks!


EDIT:

Nevermind... I've found a way to do it but, it's a bit uggly...
I need to have a DISTINCT UIHint and TWO upload views with distinct names as well...
A bit clunky but working! ;)

[T. Tsonev]

Hi,

The most likely cause for this problem is that both upload components get the same name ("upload"). This will lead to run-time errors that can be seen in the error console.

Normally, the editors will generate an unique name in order to avoid such problem. But this won't work in case of the upload because the Save handler expects a specific upload name.

My suggestion is to create the uploads manually and use unique names.

Best wishes,
Tsvetomir Tsonev
the Telerik team