Home/ Questions/Q 8614455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:07:30+00:00

Basically the following code is causing your problem: $(sourceImageForm).find(‘.imagef1_upload_process’).css(‘visibility’,’hidden’); $(sourceImageForm).find(‘.imagef1_cancel’).css(‘visibility’,’hidden’); /// THIS LINE BELOW

  • 0

Basically the following code is causing your problem:

$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden'); 
$(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden'); 
/// THIS LINE BELOW 
$(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>'); 
/// THIS LINE ABOVE 
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');

The above code is taken from the code that runs after a succesful/errorful upload has occured. This code proceeds to overwrite the form responsible for uploading the image. Now this is fine for successes because as the interface uses seperate forms for each image… once you get a success you don’t reuse that form again (so no error on the server side for subsequent uploads).

However, when the image upload errors or cancels,I try and reuse that form to upload the image again? If so you have overwritten and removed the numimage input html:

<input type='hidden' class='numimage' name='numimage' value='" numimage "' />

Which means that I would get an error as this field doesn’t exist anymore.

My question is that how can I fix this? How can I fix the problem so I don’t lose the value in the hidden input form and that the field still exists?

UPDATE:

Below is the image input form:

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
"<input type='hidden' class='numimage' name='numimage' value='" + numimage + "' />" +
"<div class='display_content_image'>" +
"<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p>" +
"<p class='imagef1_upload_form' align='center'><br/><label>" + 
"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='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
"</p><p class='listImage' align='left'></p>" +
"<iframe class='upload_target_image' name='upload_target_image' src='#' style='width:300px;height:300px;border:0px;solid;#fff;'></iframe></div></form>");

$image.append($fileImage);

Below is the jquery code in full where it starts the image file 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('.imagef1_upload_form').find('.display_content_image').css('visibility','hidden');
  sourceImageForm = imageuploadform;

        $(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow
              $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
    return stopImageUpload(2);

});      


  return true;

}

Below is the jquery code in full where it stops the image file upload:

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      var replaceForm = function(result) { 
  $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
} 

var updateForm = function(result) { 
  $(sourceImageForm).find('.imagef1_upload_form').find('.display_content_image').html(result);
} 

var displayInfo;

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


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


    });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This line:
    $(sourceImageForm).find('.imagef1_upload_form').html(...) is clobbering the contents of the form element. If the existing code works for success conditions then you should leave it as is. When you’re handling the error condition (ideally using the error callback if you have a RESTful API), rather than overridding the entire form you should have a specific element for the error message which is then populated. Something like:

    $(sourceImageForm).find('.imagef1_upload_form').find('.error_message').html(msg).show();

    Sample for update:

    var replaceForm = function(result) {
  //existing code to replace full form content
}
var updateForm = function(result) {
  //new code to display error message
}
var displayFunk;
if (success === 1){
  result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span><br/><br/>';      
  $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
  displayFunk = replaceForm;
}
else if (success === 2){
  result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
  displayFunk = updateForm;
}
else {
  result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
  displayFunk = updateForm;
}
displayFunk(result);

    Notice the === for comparison which avoids some JavaScript automatic coercion. This will head off bugs when doing things like comparing a value to 1. You’d also be best off avoiding the way you’re using a return value, but at the least you may want to use pseudo constants/enum and a dispatch table style object.

    • 0