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

3 posts, 1 answers
  1. Luca
    Luca avatar
    7 posts
    Member since:
    Nov 2015

    Posted 16 Nov 2015 Link to this post

    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>

  2. Luca
    Luca avatar
    7 posts
    Member since:
    Nov 2015

    Posted 16 Nov 2015 in reply to Luca Link to this post

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

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 18 Nov 2015 Link to this post

    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
Back to Top