How to cancel a file upload using an iframe

Question

I have seen this code from an answer for a previous stackoverflow question:

if (iframeObj.contentWindow.document.execCommand)
    { // IE browsers
        iframeObj.contentWindow.document.execCommand('Stop');
    }
else
    { // other browsers
        iframeObj.contentWindow.stop();
    }

The question can be viewed here But basically the question he asked was that is it possible for a hidden iframe to stop a file from uploading.

Now what I have is a "Cancel" button where when I upload a file, if I want to cancel the upload, then if I click on the "Cancel" button, I want the uploading of the file to stop.

But my question is that with the iframe I have and the "Cancel" button function I have, how is it implemented so that the code above can be used to cancel a file upload in my code?

Below is the form code which consists of the form and the iframe:

  var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return stopImageUpload(this);' class='imageuploadform' >" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "</p><p class='imagef1_cancel' align='center'><label>" + 
    "<input type='button' name='imageCancel' class='imageCancel' value='Cancel' /></label>" + 
    "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");

Below is the startImageUpload function where it starts uploading an image, the cancel button click handler function is displayed in this function:

function startImageUpload(imageuploadform){

              $(".imageCancel").click(function() {
              $('.upload_target').get(0).contentwindow
          return stopImageUpload();

    });

      return true;
}

score 0 · Answer 1 · answered May 07 '12 at 20:58

I am not sure, if I understand your question. However, if you are asking, why your code does not work, here are the issues:

1.) Your function name is startImageUpload, but in onsubmit handler you call stopImageUpload

2.) The line $('.upload_target').get(0).contentwindow is missing semicolon. The bigger issue is, that it does nothing.

3.) I do not know, how exactly your stopImageUpload function works, because you haven't post it here.

Hope this helps.

How to cancel a file upload using an iframe

1 Answers1