Upload control in custom scheduler template

[Jonathon]

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?

[Ivan Danchev]

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 physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                     file.SaveAs(physicalPath);
                }
            }

            return Content("");
        }

Regards,
Ivan Danchev
Telerik by Progress

[Jonathon]

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.}

[Ivan Danchev]

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