How can I cancel/stop uploading of a file in IE javascript

Question

I have a page with two forms. One of them is not visible and contains input type="file". I am uploading file with the hidden form(target of the form is an iframe element). My question is how to stop/cancel uploading of the file with javascript under IE. I have tried to remove the hidden form with JQuery and the file is still uploading.

Thanks in advance.

Answer 1

OK. I found this site looking for the same thing but these solutions did not work for my scenario. I too have an iframe target for my form and wanted to cancel the upload. These solutions did not work for some reason (IE7). I hope the following helps.

The issue was that the response sent from the servlet indicating 'file too big' was not triggering the target iframe onload event.

Try:

targetIframe.contentWindow.document.open()
targetIframe.contentWindow.document.close()

This fooled the iframe onload event into triggering and cancelled the upload automatically.

Answer 2

You probably want something along the lines of window.stop() (applied to the iframe).

This old thread reports that while window.stop() doesn't work in IE, the undocumented window.document.execCommand("Stop") does (at least in IE5).

You might also consult this StackOverflow page, which has basically the same answer, although a few other tricks are proposed.

Answer 3

Thanks for the replies. As far as I debugged that case I got the following result :) - it is not possible to cancel upload. The methods above cancelled the page to receive the response and the file is uploading to the server side. Here is the mark up of my prototype:

<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

<input type="button" id="button1" value="stopUpload" onclick="stopUpload()"/>
   <script type="text/javascript">

        function stopUpload() {               
            var frame = $get("iframe1");
            frame.contentWindow.document.execCommand("Stop");                
        }

    </script>
</div>
</form>
<form id="form2" enctype="multipart/form-data" action="http://localhost/TestingSite/Default.aspx"
method="POST" target="iframe1">
<input type="submit" />
<input type="file" name="FileUploadTest" id="FileUploadTest"/>
</form>
<iframe id="iframe1" name="iframe1" width="500px" height="500px" ></iframe>