Захват вставленного файла

Question

Google Docs поддерживает вставку файлов изображений в документ.То есть у вас есть файл изображения на рабочем столе, вы копируете файл, а затем нажимаете Ctrl + V в Google Docs.Как он захватывает эту вставку?

Этот код работает для захвата текста и изображений (не файлов) из вставки.

document.addEventListener('paste', function(e) {
    console.log(e)
    console.log(e.clipboardData.items.length)
    for (var item of e.clipboardData.items) {
        console.log(item)
    }

    console.log(e.clipboardData.files.length)
    for (var file of e.clipboardData.files) {
        console.log(file)
    }
});

Вывод:

Текст https://i.imgur.com/B3hpQAd.png

Изображение https://i.imgur.com/3XklRHn.png

Файл изображения, скопированный с рабочего стола: https://i.imgur.com/7Vv1aTW.png

Answer 1

Они, вероятно, слушают событие paste , которое является ClipboardEvent и, таким образом, имеет свойство clipboardData , которое является DataTransfer объект, из которого вы можете получить доступ к его файлам свойству.

inp.onpaste = e => {
  e.preventDefault();
  const files = e.clipboardData.files;
  if (files && files.length && !files[0].type.indexOf('image')) {
    var img = document.body.appendChild(new Image());
    img.src = URL.createObjectURL(files[0]);
  }
}

<input id="inp" placeholder="paste an image file here">