0

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>");
user1364441
  • 85
  • 1
  • 8
  • Why not simply use the jquery form plugin for this? It automatically uses XHR uploads or iframes depending on the browser support. – ThiefMaster May 03 '12 at 18:57

1 Answers1

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

GillesC
  • 10,647
  • 3
  • 40
  • 55
  • How about : `$('.upload_target').get(0).contentWindow.document.execCommand)` for example, could that work? – user1364441 May 03 '12 at 16:58
  • yep should do, also [0] is faster, after not 100% sure about execCommand access to be honest, if it fails start a new question and i am sure someone will know. – GillesC May 03 '12 at 17:02