Below is the code where it is displaying the delete message but it is displaying it in each row, this is incorrect, it should on;y be displayed in the row the file was deleted from:
var counter = 0;
function stopImageUpload(success, imagefilename){
var result = '';
counter++;
if (success == 1){
result = '<span class="imagemsg'+counter+'">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>');
}
else {
result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
}
$(".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" + counter).html(data);
});
$(this).parent().remove();
});
return true;
}
The result variable is called here in the imageupload.php:
CALLBACK:
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>
Here is the link to the application here.
Please do this, click on the “Add” button twice, in both rows use the file inputs to upload an image. In both rows it will state that file upload was a success and it will display a name of both file at the bottom of their respective rows. Now delete a file by clicking on the delete button, you will see that the message (File was Deleted) is displayed in both rows, it should only be displayed within the row the file was deleted from
Because you are initializing counter inside the function it will be a local variable, therefore the value will be ZERO every time. You need to initialize it outside of the function.