When I select the first photo, I can't enter onload, but my code works for the second selection. How can I solve this?

I want to get the photo in the onchange event of my file input element with JavaScript and edit it with canvas, but the photo is processed in onload in the second selection. The first selected photo does not enter the onload event. Thank you for your help in advance

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function addTeam_photo() {
  const input = document.querySelector("#fileSelect");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  console.log(input.files[0])
  console.log(window.URL.createObjectURL(input.files[0]))
  document.getElementById("imgresimguncelle").src=window.URL.createObjectURL(input.files[0]);
  input.addEventListener("change", (event) => {
    const image = new Image();
    // console.log(event.target.files[0]);
    image.src = document.getElementById("imgresimguncelle").src;
    image.onload = () => {
      console.log("onload");
      canvas.width = 1000;
      canvas.height = 1000;
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL();
      console.log(dataURL);
      var fd = new FormData();
      fd.append("photo", dataURL);
      console.log(fd);
      $.ajax({
        url: "islemler/function.php?islem=addTeam_photo",
        type: "POST",
        enctype: "multipart/form-data",
        processData: false,
        contentType: false,
        cache: false,
        data: fd,
        success: function (result) {
          if ($.trim(result) == "ok") {
            alert("ok");
          }
        },
      });
    };
  });
}

<!-- end snippet -->

When I select the first photo, it does not enter onload, but when I select the second, my code works

You should be setting up the onchange event handlers before setting up any image sources. What's probably happening is your first image is fully loaded before you set up the change event handler.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function addTeam_photo() {
const input = document.querySelector("#fileSelect");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
console.log(input.files[0])
console.log(window.URL.createObjectURL(input.files[0]))
document.getElementById("imgresimguncelle").src=window.URL.createObjectURL(input.files[0]);
input.addEventListener("change", (event) => {
const image = new Image();
// console.log(event.target.files[0]);
// Set up the load event before setting the image source
// And use .addEventListener instead of .onchange
image.addEventListener("change", () => {
console.log("onload");
canvas.width = 1000;
canvas.height = 1000;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
console.log(dataURL);
var fd = new FormData();
fd.append("photo", dataURL);
console.log(fd);
$.ajax({
url: "islemler/function.php?islem=addTeam_photo",
type: "POST",
enctype: "multipart/form-data",
processData: false,
contentType: false,
cache: false,
data: fd,
success: function (result) {
if ($.trim(result) == "ok") {
alert("ok");
}
},
});
});
// Now that there is a listener for the image load event,
// start to load an image.
image.src = document.getElementById("imgresimguncelle").src;
});
}

<!-- end snippet -->