I cant seem to figure out why chrome on both my iphones doesnt trigger the onchange action. Safari is able to work just fine. This used to work ( Haven't tested it in weeks until now ).

This is a nodeJs app and I am trying to upload a photo that is taken from the user.

Iphone when cilcking select photo -> UI comes up from apple to choose photo from gallery or take photo.

When I choose a photo from gallery everything works as expected. HandleFileUpload runs no issue.

When I choose "Take a photo" after the photo is taken nothing happens..it doesnt look like handleFileUpload is running.

Any ideas? Let me know if any more code is needed.

// js
document.addEventListener("DOMContentLoaded", function() {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.id = 'fileInput';
  fileInput.style.display = 'none';
  fileInput.setAttribute('onchange', 'handleFileUpload(event)');
  fileInput.setAttribute('accept', 'image/*');

  const uploaderContainer = document.getElementById("uploader-container");
  if (uploaderContainer) {
    uploaderContainer.appendChild(fileInput);
  }

  const uploader = document.getElementById("uploader");
  if (uploader) {
    uploader.addEventListener("click", function() {
      const input = document.getElementById("fileInput");
      if (input) {
        input.click();
      }
    });
  }

  const imageDisplay = document.getElementById("image-display");
  if (imageDisplay) {
    imageDisplay.addEventListener("click", function() {
      const input = document.getElementById("fileInput");
      if (input) {
        input.click();
      }
    });
  }

  fileInput.addEventListener("change", (
    event
  ) => {
    handleFileUpload(
      event
    )
  })


});

<div id="uploader-container">
  <p id="uploader-container" class="text-left mt-30 wow fadeInUp app-btns" data-wow-delay="0.4s">
    <div class="d-flex-center " style="gap: 15px">
      <a id="uploader" class="btn btn-dark btn-circle">Select Photo</a>
      <h4 id="no-images" class="text-red" style="margin:0px;display:none">No Images Found.</h4>   
    </div>
  </p>
</div>
</div>