error in cancel button function

Question

I am recieving an error below in my error console which doesn't show in the view source where the problem is:

typeError: $(...).text(...).html is not a function

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:

function htmlEncode(value) { return $('<div/>').text(value).html(); }

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.

FULL CODE:

Below is the html encode:

function htmlEncode(value) { return $('<div/>').text(value).html(); }

Function for starting the upload:

    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;

Function that stops the upload:

    function stopImageUpload(success, imagefilename){

          var result = '';
          imagecounter++;

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

          $(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("<input type='file' class='fileImage' name='fileImage' />");
          $(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("<input type='file' class='fileImage' name='fileImage' />");

        });

      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;   
    }

ImageclickHandler() function:

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

UPDATE:

Below is php code where it uploads the file:

<?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")) && ($_FILES['fileImage']['size'] > 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";
}

?> 

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



</body> 
</html>

UPDATE 2:

Current code of the iframe load:

 $(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");

Original code of the iframe load:

$(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");

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.

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

Answer 1

The reason is that stopImageUpload() expects 2 arguments, but you're only supplying 1 argument. The second argument is supposed to be the filename. Then you call htmlEncode(imagefilename) with this undefined filename argument, which calls $('<div/>').text(undefined).html(). $('<div/>').text(undefined) is treated by jQuery as if it were $('<div/>').text(), so it returns the string "". Then it tries to call "".html(), which is not valid.

The fix is to pass the filename argument to the function. But I'm not sure where you can get the filename from, so I think you may just have to remove the code that tries to put the filename into the DIV.

Answer 2

Just replace:

return $('<div/>').text(value).html();

With:

return $('<div/>').text(value).end().html();

Or

$('<div/>').text(value);
return value;

---

Update: The original script works:

Fiddle: http://jsfiddle.net/z6VzH/

Answer 3

.text() returns a string, it won't have a method .html().

And the error is not from your posted piece code, maybe in stopImageUpload.