0

I have a simple image uploader with a 'browse files' button in the middle. I'm trying to hide this upload button once images have been selected so I can display the image thumbnails without the upload button crowding everything.

Here is what I have but it's not working and i'm not sure what i'm missing (or if there's a better way to do this altogether. I am open to a whole other method of doing this if there's a better way, I just tried this because it seemed like a simple thing that should have done what I needed if I didn't make a mistake. Any suggestions?

$(document).ready(function(){
if($('#thumbnail').length){
$('#submit').hide();}
});

I need this to always be "listening" for the images to show up because it could happen at any time. If it maters, this snippet is inside of a .js file...I wasn;t sure if that was my mistake or if that should have no effect on this. Ideally I'll have an X on each image to remove the thumbnails and if all the images are removed then the upload button will appear again. I have no idea if what i'm attempting will do that as it is, or if I have to add a second bit to show it again.

Any help is appreciated. Thank you.

Mike
  • 19
  • 3
  • 2
    As you can tell, that function is going to run exactly once, when the page loads. If you need to do this when the thumbnails update, then you need to put this code in whatever event handler is handling the upload. That's all under your control. Javascript doesn't have the concept of a "continuous monitor". – Tim Roberts Jun 01 '23 at 22:54
  • Post jQuery/HTML as a [mcve] – zer00ne Jun 02 '23 at 00:42
  • @TimRoberts You can [continuously monitor the DOM for changes](https://stackoverflow.com/a/76386653/227299) – Ruan Mendes Jun 02 '23 at 02:06
  • You are not showing the code that is handling the upload of the images which is crucial in deciding how to go about this. Monitoring the DOM for changes is a potentially expensive way to do this and should only be done as a last resort. – Ruan Mendes Jun 02 '23 at 02:09

2 Answers2

2

Edit: As @Ruan Mendes pointed out in comment, it'd be much easier to hide the button in the same piece of code that load the image. But if you don't have control over that code, MutationObserver is the only choice.

Also check this answer for tips about performance if your page is very large/complex.

You can use MutationObserver to monitor changes in HTML.

function getImage() {
  $('#target').append('<div id="thumbnail">Thumbnail</div>');
}
const targetNode = document.getElementById("target");

const config = {
  attributes: false,
  childList: true,
  subtree: true
};

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType == 1 && node.id == "thumbnail") {
          $('#submit').hide();
        }
      });
    }
  }
};
const observer = new MutationObserver(callback);



$(document).ready(function() {

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);

  // Later, you can stop observing
  //observer.disconnect();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="getImage()">Click me</button>
<div id="target"></div>
<button id="submit">Submit</button>
haolt
  • 353
  • 1
  • 9
  • 1
    Though this answer is correct, you should explain that this is a last resort. Ideally, the code that puts images in can call this or has some way of notifying when it finished loading the images. – Ruan Mendes Jun 02 '23 at 01:59
  • @Ruan Mendes You're right, edited. For some reason I just assumed that he's writing a plugin/user script and can't change the loading image code. – haolt Jun 02 '23 at 02:33
0

Start with a function that shows or hides the button depending on how many thumbnail images are visible...

function toggleUploadButton(){
   const count = $('.thumbnail').length;
   if ( count > 0 ) {
       $('#submit').hide();
   } else {
       $('#submit').show();
   }
}

Then you will need two event handler functions. One that fires when a thumbnail image loads, and another when it is removed. Both will call the toggleUploadButton function above.

$("img").bind('load', toggleUploadButton );


$(".closebutton").click(function(){
     // remove the thumbnail then..
     toggleUploadButton();
});
pjaoko
  • 61
  • 5