Multiple Upload controls in MVC view

8 posts, 0 answers
  1. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 24 Jun 2013 Link to this post

    Hi, 

    I have the same issue as reported on the old Telerik MVC forum:

    http://www.telerik.com/community/forums/aspnet-mvc/upload/multiple-upload-controls-in-grid-do-not-work.aspx

    except i am not using a grid. I dynamically add "widgets" to a view each with an upload control. The first widget works fine as the name is unique but subsequent widgets do not render as the name/id is duplicated. Using the mvc wrapper as so:
    @(Html.Kendo().Upload()
        .Name("CreateMediaSelect")
        .Async(a => a
            .Save("MyActionName", "ControllerName")
            .AutoUpload(true)
        )
        .Events(events => events
            .Success("OnSuccess")
            .Upload("OnUpload")
        )
    )
    public ActionResult MyActionName(IEnumerable<HttpPostedFileBase> CreateMediaSelect)

    I can change the name/ID on each widget e.g. CreateMediaSelect_0 but as in the above post, there is an unlimited number of these. How to keep the one action in the controller, but have multiple upload controls?

    Has the fix explained in the Telerik solution been ported to Kendo? I tried a third argument in the overload to no avail.

    Thanks.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Jun 2013 Link to this post

    Hello Mark,


    When uploading files in ASP.NET MVC environment, it is important that the names of the input field and the IEnumerable<HttpPostedFileBase> parameter are the same, so the model binder could interpret the request correctly. This is thoroughly explained in the following tutorial. So in the current scenario, the IDs of the widgets are irrelevant and the only important thing is that all of the <input type='file' /> fields have the same name. You could either manually set the name attribute for each new Upload widget or use the following code snippet to set the name for all of them at once.
    E.g.
    $("[data-role='upload']").attr('name', 'CreateMediaSelect');

    Please let me know if this information was helpful for you or I could assist you further.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 16 Jul 2013 Link to this post

    Hi Dimiter

    Thank you for your reply however your answer missed my point.

    I understand all about the MVC model binder, the issue is, using the Upload MVC wrapper, you can only set the .Name. What this does, is set the input's name AND id attributes to be the same. So using my MVC wrapper code snippet in the original post below, the rendered upload control looks like so:

    <input id="CreateQuestionMediaSelect" name="CreateQuestionMediaSelect" type="file" data-role="upload" multiple="multiple" autocomplete="off">

    and a subsequent upload control renders like so:
    <input id="CreateQuestionMediaSelect" name="CreateQuestionMediaSelect" type="file">

    As the IDs are the same in both instances, only the first renders successfully. The second upload control fails to be enhanced by kendo and renders as a standard file input. Screenshot attached.

    When new upload controls are created I am pre-setting the .NAME to be the same so I do not need to use the jquery code to update that. As you say the IDs are irrelevant to the handling of the upload, BUT the problem is to have multiple upload controls rendering on the page with the same NAME but different IDs. Can you assist with this?

    Note: The MVC wrapper does not have a property for .ID so this cannot be set.

    Thanks.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 Jul 2013 Link to this post

    Hello Mark,


    You are right that ID, different than the name, cannot be set explicitly when using the MVC Wrappers. This is why I suggested the approach from my previous post, but probably I did not explained it well. You should set a unique name in the Upload widget configuration, so the ID of the Upload will be unique too and it will render as expected.
    E.g.
    @(Html.Kendo().Upload()
        .Name(<unique name>)
        ...
    )

    Then you could get all of the Uploads and set the name attribute required for the binding.
    E.g.
    $("[data-role='upload']").attr('name', 'CreateMediaSelect');

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 16 Jul 2013 Link to this post

    Thanks for the reply, I now understand your point and I have multiple upload controls rendering now client side.

    However, when uploading, the IEnumerable<HttpPostedFileBase> CreateQuestionMediaSelect is NULL

    I am updating the name in the upload event

    .Events(events => events
       .Success("CreateQuestionMediaSelectOnSuccess")
       .Upload("CreateQuestionMediaSelectOnUpload")
    )

     

    function CreateQuestionMediaSelectOnUpload(e) {
        $("[data-role='upload']").attr('name', 'CreateQuestionMediaSelect');
    }

    When monitoring the html in firebug, the name attribute is updated as expected and another input is created? See attached file.

    In the controller as mentioned, the posted files is NULL. This is the same behaviour mentioned in the old telerik thread by a user here:
    http://www.telerik.com/community/forums/aspnet-mvc/upload/multiple-upload-controls-in-grid-do-not-work.aspx

    Why would the postedFiles be null. Can you help?

    Thanks.

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 17 Jul 2013 Link to this post

    Hi Mark,


    I would like to apologize for the inconvenience caused by my last answer. Since the Async Upload is used in the current scenario, you could use the built in saveField and removeField configuration options to specify the name of the form field element.
    E.g.
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("Save", "Home")
            .Remove("Remove", "Home")
            .SaveField("files")
        )
    )
     
    @(Html.Kendo().Upload()
        .Name("differentName")
        .Async(a => a
            .Save("Save", "Home")
            .Remove("Remove", "Home")
            .SaveField("files")
        )
    )


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 11 Jun 2015 Link to this post

    I know this is a long time after this initial post but I have something similar, but different.  I have the need for multiple upload widgets on the same page and they each need to asynchronous, but I need to be able to upload any single file as an atomic command without needing to have the other upload inputs affected.

    How would I do this?

    Example: in a shopping cart, the customer can upload their own image to be used on a greeting card.  And they can add more than one custom card to their cart in a session.  

    What's the best way to handle this with Kendo so the customer can select an image for a single greeting card (cart item) and upload it without the model binder complaining about inputs that aren't used?  Let me know if I'm not clear.  It is a bit confusing.

    Thanks,

    King Wilder

  9. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 11 Jun 2015 in reply to King Wilder Link to this post

    Never mind.  I developed a work around.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready