Question

I have an application you can access [here][1]. When you open up the application, you will see an “Add” button on top, click this twice and you will see 2 table rows appear with each row containing it’s own file input.

The problem is: suppose you try to upload a file (a small file for quick upload) in the second row’s file input. After you have uploaded a file, the name of the file which has been uploaded is appended into both the top row and the second row. This is incorrect, it should only append the file name in the second row only because you used the second row’s file input to upload that file.

How can I append the file name within the same row as the file input used to upload the file?

Below is the code for the form which contains the file input:

 function insertQuestion(form) {  

  var $tbody = $('#qandatbl > tbody'); 
  var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
  var $image = $("<td class='image'></td>"); 

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p><ul class='listImage' align='left'></ul>" +
    "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr);

    };

Below is the handler the form directs to when clicked:

 function imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          return startImageUpload(imageuploadform); 
      } 
      return false;
  }

Below is where the file uploading starts and stops:

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');

      return true;
}


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


    function stopImageUpload(success, imagefilename){

          var result = '';

          if (success == 1){
             result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';      
              $('.listImage').append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage">Delete</button><br/><hr/></div>'); 
          }
          else {
             result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
          }

  $(".deletefileimage").on("click", function(event) {

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

});

    return true;

    } 

CORRECT SOLUTION:

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

         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage">Delete</button><br/><hr/></div>'); 

Answer 1

Your basic problem is:

$(‘.listImage’)

That is a selector for “any element with the class ‘listImage'”. Since you’ve clicked add twice, there are two elements with this class, and your selector matches (and appends) to both of them.

Use a more specific selector for your append and you should be all set.

Unfortunately, I can’t recommend a specific way of doing that, because I don’t know how your stopImageUpload function is being called. If it’s being triggered by a jQuery event handler, then you can refer to “this” inside your function to get the element that triggered the event, and you should be able to use that to figure out which .listImage to append to.

If it’s not triggered by an event handler, then I would imagine that whatever function is calling it knows which file input triggered things.

Once you know which element you actually want to append to, you can target it using jQuery’s eq method/selector. Here are a couple examples:

$('.listImage:eq(0)') // selects the first listImage only
$('.listImage').eq(2) // selects the third listImage only