Custom Remove and Upload Events

5 posts, 1 answers
  1. Gabriel
    Gabriel avatar
    3 posts
    Member since:
    Apr 2013

    Posted 05 May 2013 Link to this post

    Hi,

    I am trying to work out a way to use the Upload Async control to upload a single file multiple times. 

    The situation is the user will be able to upload a receipt file (most likely a pdf) for an expense they incurred which will go along with a few other attributes such as price and category. The data collected will be done using Knockout as part of an ASP.NET MVC site. They will be able to add multiple expenses but only one receipt file to go along with it.

    So I want to be able to have a form which has the other attributes as well as the ability to upload a receipt to go along with it. However I want the upload event to be fired when they click "Add Expenditure" and the remove event to be called when they click "Remove Expenditure".  Is there a way to manually call these events?

    Thanks.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 08 May 2013 Link to this post

    Hi,

    I've prepared an Upload configuration to fit my best understanding of your scenario:
    • Disabled automatic upload. This gets us a "Upload files" button after a file is selected.
    • Disabled multiple file selection.
    • Changed remove and upload button text
    • Moved upload button next to remove button

    Or in pseudo-code:
           $("#exp").kendoUpload({
            localization: {
              remove: "Remove expenditure",
              uploadSelectedFiles: "Add expenditure"
            },
            multiple: false,
            async: {
              autoUpload: false
            },
            select: function() {
              // Move the "Upload files" button next to the remove button...
            }
          });

    The end result:


    A live sample is available here: http://jsbin.com/ufovir/2/edit

    Please, feel free to share more details in case I misunderstood your scenario.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Gabriel
    Gabriel avatar
    3 posts
    Member since:
    Apr 2013

    Posted 08 May 2013 Link to this post

    Thanks for your reply.

    It is nearly there but I was hoping to be able to call the upload and remove functions from a different javascript function.

    This is my knockout code:

            self.addUserExpenditure = function () {
                var expenditure = new Expenditure();
                expenditure.ExpenditureCategoryId(self.selectedExpenditureCategory().Key);
                expenditure.ExpenditureCategoryName(self.selectedExpenditureCategory().Value);
                expenditure.GST(self.GST());
                expenditure.Price(self.Price());
                expenditure.Receipt(self.Receipt());//need to call ajax upload method and pass the file name (recepit) then generate guid
                self.UserExpenditures.push(expenditure)
    ///////////////and here I would like to call the upload function for the file
            }
            self.removeUserExpenditure = function (userExpenditure) {
                self.UserExpenditures.remove(userExpenditure)
    ///////////and here I would like the call the remove function for the file
            }


    Is that possible? Because with knockout I can't really call the remove or add functions outside of the context of where the data is in the view so I was hoping with the upload module the user would be able to choose the file then when the "add expenditure" button is clicked it will add the expenditure to the array of expenditures in the view model and then also upload the file to the server likewise with the "remove expenditure"

    I hope that makes sense.
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 10 May 2013 Link to this post

    Hi,

    Maybe I misunderstood the initial requirement. You don't need the buttons to be part of the Upload. You only need to trigger the upload/remove actions via a method call. Correct?

    We currently don't expose suitable public methods. It's possible to do, but we'll need to simulate click events.

    $(".k-upload-selected").click();
    $(".k-delete").parent().click();
    $(".k-retry").parent().click();

    Check out the updated jsBin: http://jsbin.com/ufovir/3/edit

    Does that help?

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Gabriel
    Gabriel avatar
    3 posts
    Member since:
    Apr 2013

    Posted 12 May 2013 Link to this post

    That is absolutely perfect thank you very much.
Back to Top
Kendo UI is VS 2017 Ready