Why paste event getAsFile return null for non-image file?

Below snippet show a demo to handle paste event on document, display pasted item info

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<h3>Paste file</h3>
<div id="out">

</div>
<script>
  var $log = window.out;

  function log(s) {
    $log.innerHTML += `<div>${s}</div>`
  }

  document.addEventListener('paste', function (e) {
    const data = (e.originalEvent || e).clipboardData;
    log(`Text ${data.getData('text')}`);
    Array.from(data.items)
      .forEach((item, i) => {
        let file = item.getAsFile() || {};
        console.log(item.getAsFile())
        log(`Item[${i}] type=${item.type} kind=${item.kind} getAsFile=${item.getAsFile()} file.name=${file.name} file.type=${file.type} file.size=${file.size}`);
      })
  })
</script>
</body>
</html>

But can only get image file, and the file type is incorrect, always return image/png even I paste jpg file.

When I paste some other file types, like hello.txt, getAsFile will return null, how can I handle other type of paste file ?

My log like this under macos chrome 79.0.3945.130

Text back.jpg
Item[0] type=text/plain kind=string getAsFile=null file.name=undefined file.type=undefined file.size=undefined
Item[1] type=image/png kind=file getAsFile=[object File] file.name=image.png file.type=image/png file.size=6232743

Text hello.txt
Item[0] type=text/plain kind=string getAsFile=null file.name=undefined file.type=undefined file.size=undefined
Item[1] type=image/png kind=file getAsFile=null file.name=undefined file.type=undefined file.size=undefined

Why paste event getAsFile return null for non-image file?

0 Answers