Telerik Forums / UI for ASP.NET AJAX Forum / AsyncUpload /

How to cancel all uploads from script?

Telerik UI for ASP.NET AJAX
Resources Buy Try

11 posts, 1 answers

Andreas

146 posts

Member since:
May 2008

Posted 22 Jan 2013 Link to this post

Hi,

We have a RadAsyncUpload located in a custom menu-like component (a div that is displayed/hidden with a client script).

When this div is hidden (user is clicking a close button), we want to cancel all uploads that are currently active.
We have did this by calling deleteAllFileInputs() function on the async upload, this did seem to work, but I noticed that the actual upload is not canceled when calling this method, it is still running in the background and other client events might be called (such as OnClientFileUploadFailed)...

Is there any other way to actually cancel all current uploads with a client script?

Regards
Caesar
Shinu

17764 posts

Member since:
Mar 2007

Posted 22 Jan 2013 Link to this post

Hi,

One suggestion is that you can use the RadProgressArea by setting DisplayCancelButton as True.
aspx:

<telerik:RadProgressManager runat="server" ID="RadProgressManager1" />

<telerik:RadAsyncUpload runat="server" ID="Async1">

</telerik:RadAsyncUpload>

<telerik:RadProgressArea runat="server" ID="RadProgressArea1" DisplayCancelButton="true">

</telerik:RadProgressArea>

Also check the following documentation for further information
RadProgressArea

Thanks,
Shinu
Andreas

146 posts

Member since:
May 2008

Posted 22 Jan 2013 Link to this post

Hi,

Well this is not what we want, we already has limited to one file, so there is already a cancel button (the one included in the RadAsyncUpload).

We have a script that is hiding the entire upload control, and when that happens all uploads should be canceled.
Seems natural that the deleteAllFileInputs() also cancels the upload, but it doesn't...
The entire area where the upload control i located may be hidden from multiple places, for example by clicking besides it (functions like a RadMenu). When it is set to hidden, we also want to cancel the upload, is there any way to do this in a script?
One way is of course to look for all cancel buttons and invoke a click on the button, but is there a more simple way of doing this?
Or will you fix so that the deleteAllFileInputs() also cancels the upload?

Regards
Andreas
Plamen
Admin

3078 posts

Posted 25 Jan 2013 Link to this post

Hi Andreas,

Would you please set the DisablePlugins="true" property in RadAsyncUpload and try to delete the uploading files as in the code below and let us know if you still observe the unusual behavior please elaborate a little bit what should we add or do in order to reproduce it because it is not very clear so far:

<script type="text/javascript">

            function OnClientClicked(sender, args) {

                var upload = $find("<%= RadAsyncUpload1.ClientID %>");

                upload.deleteAllFileInputs();

            }

        </script>

    <div>

        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" DisablePlugins="false">

        </telerik:RadAsyncUpload>

<telerik:RadButton runat="server" ID="RadButton1" OnClientClicked="OnClientClicked">

</telerik:RadButton>

Hope this will be helpful.Greetings,
Plamen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Andreas

146 posts

Member since:
May 2008

Posted 25 Jan 2013 Link to this post

Hi,

In your example the upload does actually stop when clicking the button, but that is not because you called the deleteAllInputFiles(), it is because in your example the button does a full postback of the page...

In your example, try setting AutoPostBack="false" on the button, then you will see it clearly in for example Fiddler, that the upload continues. Even the OnClientFileUploaded event will be called after the button was clicked...

Try this example with a large file (so you can click the button before it finishes):

<script type="text/javascript">

            function OnClientClicked(sender, args)

            {

                var upload = $find("<%= RadAsyncUpload1.ClientID %>");

                upload.deleteAllFileInputs();

            }

        </script>

        <div>

            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" DisablePlugins="true" OnClientFileUploaded="function(){alert('uploaded');}">

            </telerik:RadAsyncUpload>

            <telerik:RadButton runat="server" ID="RadButton1" OnClientClicked="OnClientClicked" AutoPostBack="false">

            </telerik:RadButton>

        </div>

Regards
Caesar
Answer
Plamen
Admin

3078 posts

Posted 30 Jan 2013 Link to this post

Hello Caesar,

Thank you for elaborating the issue.

This seems like the delete inputs function is not working properly in such scenario and in these case we recommend invoking click event (by using jQuery for example). Please excuse us for the inconvenience caused by this issue.

We will do our best to research and fix the issue for the future versions.

Regards,
Plamen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
moegal

278 posts

Member since:
Jul 2007

Posted 19 Apr 2013 Link to this post

Has this been resolved? If not do you have an example of canceling all using a click event?

Thanks, Marty
Plamen
Admin

3078 posts

Posted 22 Apr 2013 Link to this post

Hi Marty,

I have tested the code provided by Caesar and it properly deleted all the uploading files. If you only want to cancel the upload you can use the following code:

function OnClientClicked(sender, args) {

               var $ = $telerik.$;

               $(".ruCancel").each(function myfunction(index, item) {

                   this.click();

               })

           }

Please let me now if in any particular case these scenarios are not working properly so we could inspect them once again.

All the best,
Plamen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Calvin

2 posts

Member since:
Oct 2014

Posted 19 Dec 2016 in reply to Plamen Link to this post

Hi Rlamen,

I am having a JS runtime error: Unable to delete property 'file' of undefined or null reference when implementing your code.
Calvin

2 posts

Member since:
Oct 2014

Posted 19 Dec 2016 in reply to Plamen Link to this post

Hi Plamen,

What I am trying to do is to put the radProgressArea (within a bootstrap modal popup) in master page. The radasyncupload control will launch the modal popup in the onClientfileUploading event, and closing it with the event of OnClientFilesUploaded.

So, I will need a "Cancel" button on the modal popup in order to cancel the uploading process of the radasyncupload control.

When I implemented your code, it gives me a JS runtime error as descripted above.

Could you please let me know how to cancel the uploading process in script?

thanks a lot,

Calvin
Plamen
Admin

3078 posts

Posted 22 Dec 2016 Link to this post

Hi,

The scenario is quite custom and we are not aware of such issue with the control. If you can isolate it to an issue in our control please share the exact code so we could inspect it and be more helpful.

Regards,
Plamen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

How to cancel all uploads from script?

Andreas

Shinu

Andreas

Plamen

Andreas

Plamen

moegal

Plamen

Calvin

Calvin

Plamen