Kendo ui file upload error

2 posts, 0 answers
  1. Nirmala
    Nirmala avatar
    2 posts
    Member since:
    Dec 2011

    Posted 30 Nov 2012 Link to this post

    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
            }
            });

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top