JetFormBuilder & media field - hide empty space above the input when no selected file

upload media field - hide empty media box

<script>
document.addEventListener("DOMContentLoaded", function () {
  const fileInputs = document.querySelectorAll(".jet-form-builder-file-upload__input");

  function toggleFileContentVisibility(fileContainer) {
    const fileContent = fileContainer.querySelector(".jet-form-builder-file-upload__content");
    const files = fileContainer.querySelectorAll(".jet-form-builder-file-upload__files .jet-form-builder-file-upload__file");

    if (files.length < 1) {
      fileContent.style.display = "none";
    } else {
      fileContent.style.display = "flex"; // or "block" depending on your layout
    }
  }

  function handleInputChange(event) {
    const fileContainer = event.target.closest(".jet-form-builder-file-upload");
    if (fileContainer) {
      toggleFileContentVisibility(fileContainer);
    }
  }

  // Initial toggle based on the existing file count for each file upload field
  fileInputs.forEach(function (fileInput) {
    const fileContainer = fileInput.closest(".jet-form-builder-file-upload");
    if (fileContainer) {
      toggleFileContentVisibility(fileContainer);
    }
  });

  // Event delegation for input change
  document.addEventListener("change", handleInputChange);

  // Use MutationObserver to dynamically update file count
  const observer = new MutationObserver(function (mutationsList) {
    mutationsList.forEach(function (mutation) {
      if (mutation.type === "childList") {
        const fileContainer = mutation.target.closest(".jet-form-builder-file-upload");
        if (fileContainer) {
          toggleFileContentVisibility(fileContainer);
        }
      }
    });
  });

  // Set up observer for changes in the file upload container
  fileInputs.forEach(function (fileInput) {
    const fileContainer = fileInput.closest(".jet-form-builder-file-upload");
    if (fileContainer) {
      observer.observe(fileContainer, { childList: true, subtree: true });
    }
  });
});
</script>

Paste this code in HTML widget/block with the form and no more empty space above the input when no selected file.