Kendo UI Upload inside Grid

Question

I am trying to implement Kendo UI Grid with an Kendo Upload inside the grid. While I am using ASP.NET MVC I am not using the Telerik MVC Wrappers. I am attempting to do this without them.

The problem that I am having is that IEnumerable HttpPostedFileBase is null when it posts back to my Action method.

JavaScript:

$(document).ready(function () {

        var dsGalleryItemFile = new kendo.data.DataSource({
            transport: {
                read:   "@Url.Content("~/Intranet/GalleryItemFile/ListFiles/")@Model.galleryItemID",
                update: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/UpdateFile")",
                    type: "POST"
                },
                destroy: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/DeleteFile")",
                    type: "POST"
                },
                create: {
                    url: "@Url.Content("~/Intranet/GalleryItemFile/CreateFile/")@Model.galleryItemID",
                    type: "POST"
                }
            },
            // determines if changes will be send to the server individually or as batch
            batch: false,
            schema: {
                model: {
                    id: "fileID",
                    fields: {
                        fileID: {
                            editable: false,
                            nullable: true
                        },
                        filename: {},
                        fileType: { defaultValue: {fileTypeID: 1, fileType: "Web JPEG"} },
                        fileType: {},
                        width: { type: "number" },
                        height: { type: "number" },
                        }
                    }
                }
        });

        $("#gvGalleryItemFile").kendoGrid({
            columns: [{
                field: "filename",
                title: "Filename" 
            }, {
                field: "filepath",
                title: "File Upload",
                editor: fileUploadEditor//,
                //template: "<img src='#=filepath.filepath#' />"
            }, {
                field: "fileType",
                title: "File Type",
                editor: fileTypeDropDownEditor,
                template: "#=fileType.fileType#",

            }, {
                field: "width",
                title: "Width"
            }, {
                field: "height",
                title: "Height"
            }, {
                command: ["edit", "destroy"]
            }],
            editable: { mode: "inline" },
            toolbar: ["create"],
            dataSource: dsGalleryItemFile
        });


    });

    function fileTypeDropDownEditor(container, options) {
        $('<input required data-text-field="fileType" data-value-field="fileTypeID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    transport: {
                        read: "@Url.Content("~/Intranet/FileType/ListFileTypes")"
                    }
                }
            });
    }

    function fileUploadEditor(container, options) {
        $('<input type="file" name="fileUpload" id="fileUpload" />')
            .appendTo(container)
            .kendoUpload({
                async: {
                    saveUrl: "@Url.Content("~/Intranet/GalleryItemFile/UploadFile")"
                },
                complete: onUploadComplete
            });
    }

MVC Action:

[HttpPost]
    public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> uploadedFiles)
    {
        if (uploadedFiles != null)
        {
            foreach (var thisFile in uploadedFiles)
            {
                string newFileName = Path.GetFileName(thisFile.FileName).Replace(" ", "");
                var physicalPath = Path.Combine(Server.MapPath("~/Areas/Gallery/Content/GalleryImages"), newFileName);
                thisFile.SaveAs(physicalPath);

            }
            return Content("");
        }
        else
        {
            return Content("Error");
        }

    }

Answer 1

Try to name the argument parameter in the action method signature the same way as the name attribute of the input that you turn into upload widget.

In your case

public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> fileUpload)