ASP Core Upload Control is sending null data to my controller's save action.

[Miechko]

     Hello,

 

I am trying to put an upload in a grid's editor so i can add a profile picture to my users. However, when the save action is called i always receive a null object. I am using an EditorTemplate to put the upload control in the grid's edit mode. 

 

I suspect that the reason it does not work has something to do with the Editortemplate since if i copy my upload control in my main view, it sends the files to the controller properly.

 

here are the relevant code snippets:

 

Controller  
[HttpPost]
        public ActionResult Save(IFormFile files)
        {
            //Do save
            return Content("");
        }

Editortemplate

@model string

@(Html.Kendo().Upload()
        .Name("files")
        .Multiple(false)
        .Async(a => a
            .Save("Save", "File")
            .AutoUpload(true)
        )
)

 

The grid Column 

            columns.Bound(c => c.ProfilePicture).Title("Photo").EditorTemplateName("FileUpload").ClientTemplate("<img src='" + Url.Action("GetImage", "File") + "?imageID=#= ProfilePicture.ID #' alt='Profil' height='172' width='147'>").Width(160);

 

 

 

[Miechko]

After contacting support i have been told that the name of a control in a EditTemplate includes the column name. in my example, i had to change my save function to : 

 

  public ActionResult Save([Bind(Prefix = "ProfilePicture.files")] IFormFile files)

 

[Veselin Tsvetanov]

Hi Miechko,

That is correct. The .Net Core edit template will automatically get the Column name as a prefix of the field name and id attributes. That particularity needs to be respected in the controller action too.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nicolas]

Your tips was very helpful, thank you.

I was than able to upload the file and store it on the server.

However the save (Clicking on the save button at the edited row) doesn't do the action since no changes are made on the actual record (just wanted to changed the picture) unless the user change also the name property or change another column.

Anyway around that?

columns.Bound(c => c.Photo).Groupable(false).ClientTemplate(@"<img title='#=Name#' src='#=PhotoDisplay.replace('~/','')#' class='img-fluid rounded' style='width:75px;' />").Title(" ").Width(85).HtmlAttributes(new { style = "text-align: center;" }).Groupable(false).EditorTemplateName("Upload").EditorViewData(new { prefix = "P" }).MinScreenWidth(400);

columns.Bound(c => c.Name).Groupable(false);

[Veselin Tsvetanov]

Hi Nicolas,

I would suggest you to follow the approach proposed in this forum thread and implement the applicable handler for the success event of the Upload widget.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nicolas]

Thanks, This is what I did. Not the easiest or simplest but it works.
I would still rather see the upload control acting the same way a on a regular form where hen updating the form it passed the file info on the controller (aspnet core), if possible of course :-)

Thanks.

[Veselin Tsvetanov]

Hi Nicolas,

The updated Grid model and the Upload widget sent two requests of different types to the server. The Upload sends an HttpRequest of type FormData, while the Grid update / create will send a jQuery AJAX request. That is the reason why they could not be merged in a single request to the server. Nevertheless, if you think that this approach needs to be altered, I would suggest you to log your idea as a feature request on our Feedback portal. Based on the support it receives, we will decide on whether to proceed with its implementation or not.

Regards,
Veselin Tsvetanov
Progress Telerik