I want to change the functionality of element.dragend() for an image in my browser/webapp to a word file or any other application?

So, Currently if i drag an image from my website or any other website which contains images and drag and drop it to a word or an excel, it would paste the image as it is or paste the link on the application on drop.

But what i actually want is that when i do a drop of the image on word/excle file, i want to basically run a function ondrop/ondragleave that would store some data in my clipboard and finally paste it on the word/excel file.

Below code is my current implementation, which helps me know that i have dropped the element outside the browser, but i want to paste data of my clipboard instead of the image which i have actually dragged and dropped onto the word file.

  element.addEventListener("dragend", (e) => {
    e.preventDefault();
    console.log("Ended " + (outside ? "Outside" : "Inside"));
  });

  element.addEventListener("dragstart", (e) => {
    outside = false;
  });

  window.addEventListener("dragleave", (e) => {
    window.setTimeout(() => {
      if (
        (e.target === document.documentElement || e.target === document.body) &&
        e.relatedTarget == null &&
        e.buttons != 0
      ) {
        outside = true;
      }
    });
  });

  window.addEventListener("dragenter", (e) => {
    if (
      (e.target === document.documentElement || e.target === document.body) &&
      e.relatedTarget == null
    ) {
      outside = false;
    }
  });