Upload control in custom scheduler template

4 posts, 0 answers
  1. Jonathon
    Jonathon avatar
    2 posts
    Member since:
    Dec 2016

    Posted 08 Jan Link to this post

    I have made a custom editor template for my scheduler and wish to be able to upload attachments to events.

    I have added an upload control to the template and can successfully upload/delete files within one instance.

    However, if I open the calendar event after creation, the previously uploaded files will not populate.

    Is there a way to bind the upload control to the calendar event, as it contains all the attachments information?

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1302 posts

    Posted 10 Jan Link to this post

    Hello Jonathon,

    There is no built-in functionality that would persist the selected file information within a Scheduler event, but you could give the approach demonstrated in this sample dojo a try. It consists of saving the uploaded file name in a hiddenfield, the value of which is read in the Scheduler's save event handler and set to the event's uploadedFile field. An input ("uploadedFileName") in the editor template is bound to the same field (data-bind="value: uploadedFile") and displays the uploaded filename.
    Note that the server side method ("saveUrl": "/Upload/Save") that saves the uploaded file must be implemented, the action I am using for example:
    public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
            {
                // The Name of the Upload component is "files"
                if (files != null)
                {
                    foreach (var file in files)
                    {
                        var fileName = Path.GetFileName(file.FileName);
                        var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
     
                         file.SaveAs(physicalPath);
                    }
                }
     
                return Content("");
            }


    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jonathon
    Jonathon avatar
    2 posts
    Member since:
    Dec 2016

    Posted 11 Jan Link to this post

    Hi Ivan,

    Thank you for help.I was attempting to allow attachments to be assigned to a scheduler event. I had previously successfully done this. However I wanted the upload control to contain the list of previously uploaded files when an existing event was opened. I have since managed to achieve this by storing an array of attachments within the event and then using JavaScript to populate the upload control when an event is opened for editing. It would have been really useful if the upload control had an "addFile" function similar to the "clearFile"/"removeFile" but just for populating the initial files. The code I used to do this was:

    01.function addExistingAttachment(fileName, fileExt, fileSize) {
    02.  var fileGuid = genGuid();
    03. 
    04.  var $uploader = $("#Attachments").data("kendoUpload");
    05. 
    06.  var newLi = $("<li>").addClass("k-file f-file-success").prop("data-uid", fileGuid).data("uid", fileGuid)
    07.    .append($("<span>").addClass("k-progress").prop("style", "width: 0%; display: none;"))
    08.    .append($("<span>").addClass("k-file-extension-wrapper")
    09.      .append($("<span>").addClass("k-file-extension").html(fileExt))
    10.      .append($("<span>").addClass("k-file-state").html("uploaded"))
    11.    )
    12.    .append($("<span>").addClass("k-file-name-size-wrapper")
    13.      .append($("<span>").addClass("k-file-name").prop("title", fileName).html(fileName))
    14.      .append($("<span>").addClass("k-file-size").html(fileSize))
    15.    )
    16.    .append($("<strong>").addClass("k-upload-status")
    17.      .append($("<span>").addClass("k-upload-pct").html("100%"))
    18.      .append($("<button>").prop("type", "button").addClass("k-button k-button-bare k-upload-action")
    19.        .append($("<span>").addClass("k-icon k-i-close k-i-delete").prop("title", "Remove").prop("aria-label", "Remove")).on("click", function () { removeAttachment(fileName); })
    20.      )
    21.    );
    22.  var uploadWrapperUl = $uploader.wrapper.find("ul");
    23.  if (uploadWrapperUl.length == 0) {
    24.    $uploader.wrapper.removeClass("k-upload-empty k-upload-files k-reset");
    25.    $uploader.wrapper.append($("<ul>").addClass("k-upload-files k-reset"));
    26.    uploadWrapperUl = $uploader.wrapper.find("ul");
    27.  }
    28.  uploadWrapperUl.append(newLi);
    29.}
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1302 posts

    Posted 12 Jan Link to this post

    Hello Jonathon,

    Thank you for sharing your approach. As for an addFile method missing from the Upload's API this is due to security reasons. A file cannot be automatically uploaded without user interaction (dragging/dropping a file or through the select dialog), thus an option to pre-populate the list of uploaded files is not included.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top