Question

I am trying to stop a file from uploading when the user clicks on the “Cancel” button. To do this I am thinking of stopping the transport inside the iframe. The problem is be able to code this correctly. Below is the code of what I am trying to achieve but I am getting this error here:

$('.upload_target').contentWindow is undefined

How can this first of all be error be fixed and second how can the code below be written correctly so that when the “Cancel” button is clicked on, it stops the transpart inside the iframe?

Below is the startImageUpload() function where it starts uploading a file. Within that function is the function which handles the “Cancel” button when it is clicked;

function startImageUpload(imageuploadform){


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

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


          return stopImageUpload();

    });

      return true;
}

Below is the form code which consists of the iframe:

 var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return startImageUpload(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></p>" + 
    "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>"); 

Answer 1

$('.upload_target') will return a jQuery object containing all elements with that class, so the contentWindow property wont exists

$(.upload_target:eq(0)').get() will return the (first but assuming only one) element itself and then contentWindow should exists

or $(.upload_target')[0] if you are targetting a single element but then an ID would be more performant