KendoUI jQuery Upload is not working in kendoForm

Question

In my current code implementation, I've encountered a challenge where all controls are operating as expected, except for the file upload functionality linked to the "Attachments" field. Despite my attempts to resolve the issue using various approaches, such as employing the "Upload" editor and Kendo.Upload, I have been unable to achieve success. The specific problem appears to be isolated to the file upload feature for the Attachments field. I've thoroughly investigated potential solutions, but none have proven effective so far. Any insights or suggestions regarding troubleshooting and resolving this particular file upload issue in the Attachments field would be greatly appreciated. Your assistance in overcoming this hurdle is crucial for the comprehensive functionality of my application.

   ,,,
 $("#form-communication").kendoForm({
size: "small",
formData: {
    StartDate: new Date(),
    EndDate: new Date(),
    Active: false,
    Notes: "",
    Attachments: "",        
},
layout: "grid",
grid: {
    cols: 4,
    gutter: 5
},
items: [
    { field: "StartDate", label: "Start Date", editor: "DatePicker" },
    { field: "EndDate", label: "End Date", editor: "DatePicker" },
    { field: "Active", label: "Active", editor: "Switch" },
    {
        field: "Notes", label: "Notes", editor: "TextArea",
        colSpan: 3,
        editorOptions: {
            placeholder: "Notes",
            rows: 3
        }
    },
    {
        field: "Attachments", label: "Attachments",
        colSpan: 3,
        editor: "Upload", //kendo.Upload
        editorOptions: {
            async: true,
            multiple: false,                     
        }
    }
],
validateField: function (e) {    },
submit: function (e) {
    e.preventDefault();
   
},
clear: function (ev) {  }
});
'''

Please help me in this.

Answer 1

The Upload widget is not part of the built-in editors for the form, that's why it is not initializing. You can still use an upload widget as part of a kendo form, though you need to add it as a custom editor:

{
  field: "Attachments",
  label: "Attachments",
  colSpan: 3,
  editor: function(container, options) {
    $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>')
    .appendTo(container)
    .kendoUpload({
      async: {
        saveUrl: "save",
        removeUrl: "remove",
        autoUpload: true
      }
    });
}

Here is an example.