Use Upload in an Event and save the file name in the model

[Luca]

Hello to all.

I have a scheduler with a Custom Editor.

A model with the member Image (string)

I'd like to use an Upload control in order to

1) upload the image on the server, by sending also the calendarID in case of editing an existing calendar event

2) on Save, store the file name in the Image member of the model.

At the moment I'm able to insert an Upload control in the custom Editor, but I'm not able to store the filename in the Model member (via MVVM)

Is this possible?

Should I use the "save event" of the calendar to discover the current value of the Upload control and update the model (how is possible to update the model ???)

 Thanks.

 My code:

 member of the Model:

[Display(Name = "Logo")]
public string Image { get; set; }

 

Custom Editor:

(NB: calendarID should be the ID of the current calendar in case of editing, but I don't know how :-( )

Thanks!!!

 

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Image))
</div>
<div data-container-for="Image" class="k-edit-field">
    @(Html.Kendo().Upload()
        .HtmlAttributes(new { accept = "image/*" })
        .Name("calendarImages")
        .Async(async => async
            .Save("SaveImage", "Calendar", new { calendarID = 1 })
            .Remove("RemoveImage", "Calendar", new { calendarID = 1 })
            .AutoUpload(true)
        )
        .Multiple(false)
    )
</div>

[Luca]

When an Event is editied, I need also to set the filename in the Upload control ..

 

 

[Vladimir Iliev]

Hello Luca,

As shown in the example of using Upload widget inside Grid editor template you should subscribe to the "success" event of the Upload widget where to find the hidden input element bind to the model property, update it's value and trigger the "change" event:

Example editor template for the field that holds the path to the file:

@model string

@Html.HiddenFor(m => m)
@Html.ValidationMessageFor(m => m)

<script>
    function success(e) {
        var imagePath = e.response.ImageUrl;

        $("#ImageUrl").val(imagePath).trigger("change");
    }
</script>

@(Html.Kendo().Upload()
    .Name("file")
    .Multiple(false)
    .Async(a => a
        .Save("Save", "Category")
        .AutoUpload(true)
    )
    .Events( e => e.Success("success"))
 )

Regards,
Vladimir Iliev
Telerik

[ALEXANDER]

Hi Vladimir.

What should I do, If e.responce == null in "onSuccess" event handler? Is it possible to map data or reference of uploading file some other way other then you described?  

[Veselin Tsvetanov]

Hi Alexander,

I would recommend you to return JSON data about the upload file in the Save() action response. In this way you will be able to retrieve that data in the Success() event handler of the Upload. Here is a sample implementation for the Upload Save() endpoint:

public ActionResult Save(HttpPostedFileBase file)
{
    var fileName = Path.GetFileName(file.FileName);
    var physicalPath = Path.Combine(Server.MapPath("~/CategoryImage"), fileName);

    file.SaveAs(physicalPath);

    return Json(new { ImageUrl = fileName }, "text/plain");
}

If, for some reason, you do not want to return data from the Save() server cal, you will need to retrieve the file info from the other member of the success event argument object:

function onSuccess(e) {
   // An array with information about the uploaded files
   var files = e.files;
}

Regards,
Veselin Tsvetanov
Progress Telerik