Изображение не читается при вставке

Question

Я сделал инструмент, который конвертирует изображения в данные base64.

<input id="inp" type='file'><br>
<br>
<textarea readonly placeholder="Base64 data" id="b64"></textarea>
<br>
<img id="img">
<script>
function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
  
}

window.addEventListener('paste', e => {
  document.getElementById("inp").files = e.clipboardData.files;
});

document.getElementById("inp").addEventListener("change", readFile);

</script>

Изображение можно загрузить либо с помощью <input id="inp" type='file'>, либо путем прямого копирования и вставки изображения из буфера обмена в окно.

Вот в чем проблема; когда изображение загружается через обычный <input>, оно отображает данные base64 в течение нескольких секунд, однако при вставке изображения из буфера обмена в окно input кажется, распознает изображение как image.png , но данные не отображаются. Как я могу решить эту проблему?