HTML Вставить изображение из буфера обмена в файл ввода

Question

Хорошо, вот и все.Я видел замечательные способы вставки изображений в веб-чаты WhatsApp.В большинстве примеров используется холст для захвата вставленного изображения в буфер обмена, как вставить его в файл ввода , используя только Ctrl + V в любом месте страницы ?

Вот код, который я имею длявход, который автоматически передает, как только кто-то выбрал файл:

      <form id="new_document_attachment" method="post">
            <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
                <input type="file" id="document_attachment_doc" />
      </form>
      <script>
          document.getElementById("document_attachment_doc").onchange = function() {
          document.getElementById("new_document_attachment").submit();
        };
      </script>

Answer 1

Это довольно просто.Просто перехватите событие paste на объекте window и поместите все полученные от него файлы в тег <input>.

const form = document.getElementById("new_document_attachment");
const fileInput = document.getElementById("document_attachment_doc");

fileInput.addEventListener('change', () => {
  form.submit();
});

window.addEventListener('paste', e => {
  fileInput.files = e.clipboardData.files;
});

<form id="new_document_attachment" method="post">
  <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
  <input type="file" id="document_attachment_doc" />
</form>