'Pasting file not work from clipboard on react (updated -> about clipboard permission)

I want to impement to file upload by paste from clipboard.

so, i tried that get a file object from onPaste.

const handlePaste = (e) => {
  console.log(e.clipboardData.items[0])
}
<MessageInput
  ...
  onPaste={handlePaste}
>

and, i got a data in console.log

DataTransferItem {kind: "string", type: "text/plain"}
kind: ""
type: ""
__proto__: DataTransferItem

Although i copied image clearly. Why?

How can i get file from clipboard by pasting?

-- update --

if i set permission about clipboard for this page, i can get file object from clipboard.

then, how can i request permission about clipboard to user? It is not work.

navigator.permissions.query({
      name: 'clipboard-read',
    }).then(permissionStatus => {
      // Will be 'granted', 'denied' or 'prompt':
      console.log(permissionStatus.state):

      // Listen for changes to the permission state
      permissionStatus.onchange = () => {
        console.log(permissionStatus.state)
      }
    })
```



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source