Kendo ui file upload error

[Nirmala]

Hi,

I have a grid and bound data along with kendo upload control in the toolbar. i have written jquery as shown below to upload the files. but files are not being uploaded. none of the methods of upload control are firing. Also i need to restrict file types to upload. how to resolve this. Please help.



@(Html.Kendo().Grid<FileListRow>()
.Name("Grid")
.Selectable()
.Sortable()
    .ToolBar(tools => tools.Template("<div id='UploadArea' class='k-widget k-upload'> Upload a document : <span class='uploadFileType' >Please upload only Microsoft Office, Text, Email or PDF files.</span>" +
   "<div class='k-button k-upload-button' ><span>Select...</span><input id='uploadDocument' name='uploadDocument' type='file'  multiple='multiple' autocomplete='off' ></div>" +
         " <span id='spnValidDoc'>Forbidden file type.</span> <span id='spnValidFileSize'>Upload Failed! You can upload maximum of " + Model.DocumentExplorerMaxUploadSize + " MB</span>" +
   "</div>"))


.Columns(columns =>
{
    columns.Bound(file => file.flFileId).Hidden();
    columns.Bound(file => file.fdFolderId).Hidden();
    columns.Bound(file => file.flFileName).Title("File Name");//.ClientTemplate("<img src='#=FileIconUrl#' />  <span title='#=flFileDesc#'>#=flFileName#</span>").Title("File Name").Width(Model.IsAdministrator ? 300 : 800);
    columns.Bound(file => file.flFileDesc).Title("Description").Hidden();
    columns.Bound(file => file.flFileType).Title("Type").HtmlAttributes(new { style = "text-align:right" }).HeaderHtmlAttributes(new { style = "text-align:right", @width = "3%" }).ClientTemplate("<span style='text-transform: uppercase'>#= flFileType #</span>");
    columns.Bound(file => file.FileSize).Title("Size").HtmlAttributes(new { style = "text-align:right"}).HeaderHtmlAttributes(new { style = "text-align:right" });
    columns.Bound(file => file.flUpdateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Date Uploaded").HtmlAttributes(new { style = "text-align:right", @width = "23%"  }).HeaderHtmlAttributes(new { style = "text-align:right" });
    columns.Bound(file => file.flUpdateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Date Uploaded").HtmlAttributes(new { style = "text-align:right", @width = "23%" }).HeaderHtmlAttributes(new { style = "text-align:right" });
    columns.Bound(file => file.fdDownloadCount).Hidden();

   // columns.Bound(file => file.fdDownloadCount).ClientTemplate("<a href='" + Url.Action("Download", "Home") + "/#=flFileId#'>Download</a>");
    columns.Command(commands =>
    {
       // commands.Custom("Download").Action("Download", "Home", new { area = "Document" }).HtmlAttributes(new { onclick = "RefreshGrid(event, this)", Title = "Download" });
        commands.Edit().HtmlAttributes(new { Title = "Edit" });
        commands.Destroy().HtmlAttributes(new { Title = "Delete" });
       // commands.Custom("DownloadCount").Text("").Action("Download", "Home", new { area = "Document" }).HtmlAttributes(new { onclick = "ShowLog(event, this)", Title = "", id = "btnDownloadCount"});
    }).Width(Model.IsAdministrator ? 150 : 45).HtmlAttributes(new { @class = "t-gridButtonAlignment" });    
}).Events(events => events
            .DataBound("onRowDataBound")
            .Edit("onEdit"))
            .DataSource(dataSource => dataSource.Ajax().ServerOperation(false)
                                .Read("GetFileList", "Explorer", new { area = "Document", id = Model.SelectedFolderId })
                                .Model(model => model.Id(file => file.flFileId))
                                .PageSize(Model.DocumentExplorerPageSize)
                        .Update("Update", "Explorer", new { area = "Document" })
                        .Destroy("Delete", "Explorer", new { area = "Document", folderId = Model.SelectedFolderId })
                        ).Pageable(pager =>
                                    pager.PageSizes(true)
                                  ).Sortable()
                                                .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("_EditFilePopup"))

        )

my jquery is -

$(document).ready(function () {
      ('#uploadDocument').kendoUpload
      
        ({
            async:
        { saveUrl: '@Url.Action("Upload", "Explorer")',  // $.Site.RelativeWebRoot + "Document/Explorer/Upload", "autoUpload": true },
            autoUpload: true,
            Upload: onUpload,
            Success: onUploadSuccess,
            Error: onUploadError
        }
        });

[Petur Subev]

Hello Nirmala,

Hello I tried your case and the upload seems to be working fine - check the attached project. 

On a side note if you are trying to attach handlers to the different events you should not use capital letters. Here is a demo which shows how to properly attach event handlers.

Regards,
Petur Subev
the Telerik team