# Using Grid Upload in a Custom Popup Edit Template

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Grid for Progress® Telerik® UI for ASP.NET Core</td>
 </tr>
</table>

## Description

When adding an Upload component to a grid, using `EditorTemplateName`, the component seems to work, however, when I check my `Save` method, it receives an empty list. The origin of the problem is that the payload is not automatically bound to the `IEnumerable<IFormFile> files` but it is sent to the server.

## Solution

The expected parameter is `files` while the one sent from the Telerik UI for ASP.NET Core Upload initialized as an editor has another name: `FileUploads.files`. This occurs because of the `Html.EditorFor()` syntax.

Instead:

1. Do not use the `@Html.EditorFor()` syntax to call the Upload in the form. Include it in the custom PopUp editor, to avoid the issue with the name:

   * the `Upload` event handler passes the model Id so it can be intercepted in the controller
   * the `Success` handler ensures that the grid column template will reflect the change instantly and show the name of the file:

   ```
      @model CoreEditableGrid.Models.OrderViewModel

       @Html.HiddenFor(m => m.OrderID)
       @(Html.Kendo().TextBoxFor(model => model.ShipName))

       @(Html.Kendo().Upload()
          .Name("files")
          .Multiple(true)
          .HtmlAttributes(new { aria_label = "files" })
          .Events(e => e
          .Upload(@<text>
              function(e) {
                e.data = { id: $("#OrderID").val() };
              }
          </text>).Success(@<text>
              function(e) {
               var grid = $("#grid").data("kendoGrid");
               var dataItem = grid.dataSource.get($("#OrderID").val());
               dataItem.FileUploads = e.files;
              }
          </text>))
             .Async(a => a
             .Save("Post", "Grid")
             .AutoUpload(true))
       )
   ```

2. Add a `ClientTemplate` which caters for the difference in the file names sent by the success handler and the `IFormFile`:

   ```Razor
       columns.Bound(p => p.FileUploads).ClientTemplate("#=getFileTemplate(data)#");
       <script>
           function getFileTemplate(data) {
                   var fileNames = data.FileUploads.map(function (file) {
                       return file.FileName ? file.FileName : file.name + " ";
                   });
                   return fileNames;
           }
       </script>
   ```

## More ASP.NET Core Grid Resources

* [ASP.NET Core Grid Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/overview)

* [ASP.NET Core Grid Demos](https://demos.telerik.com/aspnet-core/grid/index)

* [ASP.NET Core DataGrid Product Page](https://www.telerik.com/aspnet-core-ui/grid)

* [Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET Core Forums](https://www.telerik.com/forums/aspnet-core-ui)

## See Also

* [Client-Side API Reference of the Grid for ASP.NET Core](https://docs.telerik.com/kendo-ui/api/ui/grid)
* [Server-Side API Reference of the Grid for ASP.NET Core](https://docs.telerik.com/aspnet-core/api/grid)
* [Telerik UI for ASP.NET Core Breaking Changes](https://www.telerik.com/aspnet-core-ui/documentation/backwards-compatibility/2023-backwards-compatibility)
* [Telerik UI for ASP.NET Core Knowledge Base](https://docs.telerik.com/aspnet-core/knowledge-base)