How to trap when user clicks on cancel button

[Vasssek]

Hello Telerik Team,

I have one issue with radasyncupload control. I need to trap event when user clicks on cancel button during uploading of a file. I didn't find any onclient method which could allow this.

Do you have an idea, how to solve it ?

For further information please check the attachment of this message.

Thank you.

Vasssek

[Vasssek]

Any idea how to do it ???

[Dimitar Terziev]

Hello Vasssek,

There is no event which is fired when this "cancel" button is clicked, but you could subscribe on the "click" event and put your logic into the event handler function. In order to subscribe on the click event use the following implementation:

function pageLoad() {

    var upload = $find("RadAsyncUpload");

    $telerik.$(".ruCancel", upload.get_element()).live('click', function() {

        alert('User clicked on cancel');

    });
}

 I hope you will find this approach useful.

All the best,
Dimitar Terziev
the Telerik team

[Mike]

That is a nice way to handle the cancel event. Can you tell me how, client-side, I can then reset the AsynchUpload control back to the "select a file" mode?

Thanks.

[Dimitar Terziev]

Hello Mike,

If you want to delete the input with the canceled file you should get a reference to the RadAsyncUpload and then call its deleteFileInputAt  method:

async.deleteFileInputAt(0)

Regards,
Dimitar Terziev
the Telerik team

[Derek Swanson]

The async.deleteFileInputAt(0) works nicely if I want to remove a file with the cancel button, but only if there if one file.  How can I determine which file to remove if there are multiple files with the cancel button?  For example, say a user is uploading 10 files and tries to cancel the 5th file, how can I get the row/position of the 5th file to remove that file?  From the code so far I have everything working except this part.  Any ideas?  Thanks!

Cheers,
Derek

[Dimitar Terziev]

Hi Derek,

Once the cancel button is clicked and the event handler function is invoked, one you could check the index of the target element and use it with the  deleteFileInputAt method. In order to get the index of the current element, the jQuery index() method could be used. Here is a sample implementation:

function pageLoad() {

               var async = $find("RadAsyncUpload1");
               $telerik.$(".ruCancel", async.get_element()).live('click', function () {
                   var $element = this,
                       index = $telerik.$(".ruButton", async.get_element()).index($element);

                   async.deleteFileInputAt(index);
               });
           }

Regards,
Dimitar Terziev
the Telerik team