Multiple Upload controls in MVC view

[Mark Mergler]

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.

[Dimiter Madjarov]

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

[Mark Mergler]

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.

[Dimiter Madjarov]

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

[Mark Mergler]

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.

[Dimiter Madjarov]

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

[King Wilder]

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

[King Wilder]

Never mind.  I developed a work around.

[Sasp]

I have a question->

I have multiple KendoUpload control in my page and I have a custom submit button. By clicking submit whichever upload control having data those to be submitted to dot net core controller part. I am good to submit one KendoUpload value, but not able to pass multiple upload values into controller part at one shot.

I am also passing other input values along with upload file. This is a single upload process, I am following. In the controller part, I am receiving by IFormFile.

Any suggestion?

 

public async Task<IActionResult> UploadImage(IEnumerable<IFormFile> files, ReportComponentVM subVM)
        {
            try
            {
                if (files != null)
                {
                    await AttachmentFileSave(false, files.FirstOrDefault(), "test", "test2",1);
                }
                return Json(new JsonResponse { Message = "UploadImage", IsSuccess = true });
            }
            catch (Exception ex)
            {
                return Json(new JsonResponse { Message = ex.Message, IsSuccess = false });
            }
        }

[Aleksandar]

Hi Sasp,

Without the configuration of the Upload widget provided I will assume it is configured for Async mode and AutoUpload is set to false.  A possible approach you can try is preventing the default submit action, iterating all the Kendo Upload widgets on the page, and checking if there are any selected files. The getFiles method could be used for this. If there are any selected files you can manually trigger the upload process for the particular widget instance via the upload method. If you need to send additional data along with the file refer to the section on sending additional metadata with the uploaded files. Check this knowledgebase article for additional details.

Regards,
Aleksandar
Progress Telerik