This is a migrated thread and some comments may be shown as answers.

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

4 Answers 937 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Luca
Top achievements
Rank 1
Luca asked on 16 Nov 2015, 11:09 AM

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>

4 Answers, 1 is accepted

Sort by
0
Luca
Top achievements
Rank 1
answered on 16 Nov 2015, 11:11 AM

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

 

 

0
Accepted
Vladimir Iliev
Telerik team
answered on 18 Nov 2015, 09:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
ALEXANDER
Top achievements
Rank 1
answered on 10 Sep 2018, 07:23 PM

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?  

0
Veselin Tsvetanov
Telerik team
answered on 12 Sep 2018, 01:38 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Scheduler
Asked by
Luca
Top achievements
Rank 1
Answers by
Luca
Top achievements
Rank 1
Vladimir Iliev
Telerik team
ALEXANDER
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or