How to cancel all uploads from script?

[Andreas]

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]

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]

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]

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

[Andreas]

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

[Plamen]

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

[moegal]

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

Thanks,  Marty

[Plamen]

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

[Calvin]

Hi Rlamen,

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

[Calvin]

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]

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