error in cancel button function
<p>I am recieving an error below in my error console which doesn't show in the view source where the problem is:</p>

<pre><code>typeError: $(...).text(...).html is not a function
</code></pre>

<p>But by trying to figure out where the error is coming from the error I believe is in the piece of code below as it appears after I click the cancel button:</p>

<pre><code>function htmlEncode(value) { return $('&lt;div/&gt;').text(value).html(); }
</code></pre>

<p>I can't find in google what this problem is but does anyone see an error in my jquery code? The error in the code may cause the error in the console if there is an error.</p>

<p>FULL CODE:</p>

<p>Below is the html encode:</p>

<pre><code>function htmlEncode(value) { return $('&lt;div/&gt;').text(value).html(); }
</code></pre>

<p>Function for starting the upload:</p>

<pre><code>    function startImageUpload(imageuploadform){

      $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
      $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
      $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
      $(imageuploadform).find('.imagemsg').css('visibility','hidden');
      sourceImageForm = imageuploadform;

            $(".sbtnimage").attr("disabled", "disabled");
            $(".sbtnvideo").attr("disabled", "disabled");
            $(".sbtnaudio").attr("disabled", "disabled");

            $(imageuploadform).find(".imageCancel").on("click", function(event) {
                      $('.upload_target_image').get(0).contentwindow;
                      stopImageUpload(2);

          $("iframe[name='upload_target_image']").on("load",function() {
          stopImageUpload(1);
        }).attr("src", "cancelimage.php");

    }); 
          return true;
    }

          var imagecounter = 0;
</code></pre>

<p>Function that stops the upload:</p>

<pre><code>    function stopImageUpload(success, imagefilename){

          var result = '';
          imagecounter++;

          if (success == 1){
             result = '&lt;span class="imagemsg'+imagecounter+'"&gt;The file was uploaded successfully&lt;/span&gt;';      
             $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" image_file_name="' + imagefilename + '"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
          }
          else if (success == 2){
              result = '&lt;span class="imagemsg'+imagecounter+'"&gt; The file upload was cancelled&lt;/span&gt;';
          }
          else {
             result = '&lt;span class="imagemsg'+imagecounter+'"&gt;There was an error during file upload&lt;/span&gt;';
          }

          $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
          $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
          $(sourceImageForm).find('.imagemsg').html(result);
          $(sourceImageForm).find('.imagemsg').css('visibility','visible'); 
          $(sourceImageForm).find(".fileImage").replaceWith("&lt;input type='file' class='fileImage' name='fileImage' /&gt;");
          $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');

          $(".sbtnimage").removeAttr("disabled");
          $(".sbtnvideo").removeAttr("disabled");
          $(".sbtnaudio").removeAttr("disabled");

            $(".imageClear").on("click", function(event) {
            event.preventDefault();
            $(this).parents("form:first").find(".fileImage").replaceWith("&lt;input type='file' class='fileImage' name='fileImage' /&gt;");

        });

      var _imagecounter = imagecounter;

    $('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
        var image_file_name = $(this).attr('image_file_name');

        jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
            .done(function(data) {

            $(".imagemsg" + _imagecounter).html(data);
        });

        $(this).parent().remove();
    });

          return true;   
    }
</code></pre>

<p>ImageclickHandler() function:</p>

<pre><code>  function imageClickHandler(imageuploadform){ 
  if(imageValidation(imageuploadform)){ 
      window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
      return startImageUpload(imageuploadform); 
  } 
  return false;
}
</code></pre>

<p>UPDATE:</p>

<p>Below is php code where it uploads the file:</p>

<pre><code>&lt;?php

ini_set('display_errors', 1);
error_reporting(E_ALL);


session_start();


if ($_FILES['fileImage']['error'] === UPLOAD_ERR_OK) {
    $result = 0;


    if (getimagesize($_FILES['fileImage']['tmp_name'])) {
        if ((($_FILES["fileImage"]["type"] == "image/gif") || ($_FILES["fileImage"]["type"] == "image/jpeg") || ($_FILES["fileImage"]["type"] == "image/pjpeg") || ($_FILES["fileImage"]["type"] == "image/jpg")) &amp;&amp; ($_FILES['fileImage']['size'] &gt; 0)) {
            if (is_file("ImageFiles/" . $_FILES['fileImage']['name'])) {
                $parts = explode(".", $_FILES['fileImage']['name']);
                $ext   = array_pop($parts);
                $base  = implode(".", $parts);
                $n     = 2;

                while (is_file("ImageFiles/" . $base . "_" . $n . "." . $ext))
                    $n++;
                $_FILES['fileImage']['name'] = $base . "_" . $n . "." . $ext;

                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;


            }

            else {
                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;
            }

        }

    }
} else {
    echo "Upload was not successful";
}

?&gt; 

  &lt;script language="javascript" type="text/javascript"&gt;window.top.stopImageUpload(&lt;?php
echo $result;
?&gt;, '&lt;?php
echo $_FILES['fileImage']['name'];
?&gt;');&lt;/script&gt; 



&lt;/body&gt; 
&lt;/html&gt;
</code></pre>

<p>UPDATE 2:</p>

<p>Current code of the iframe load:</p>

<pre><code> $(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow;
                  stopImageUpload(2);

      $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(1);
    }).attr("src", "cancelimage.php");
</code></pre>

<p>Original code of the iframe load:</p>

<pre><code>$(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow;

      $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(2);
    }).attr("src", "cancelimage.php");
</code></pre>

<p>What happended with the orignal code was that when a file uploaded succesfully, what happended was that a split second it displayed the success == 1 message but then straight away it displayed the cancel message which is success -- 2.</p>

<p>This was obviously incorrect so to try to fix it, I tried the current code solution so that what I thought would happen is that if cancelled, display the success == 2 message, if file was successful, it displays the success == 1 message and that message did not change. But as worked out thanks to Barman that is causing the error I am having</p>
