Custom Remove and Upload Events

[Gabriel]

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.

[T. Tsonev]

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

[Gabriel]

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.

[T. Tsonev]

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

[Gabriel]

That is absolutely perfect thank you very much.