HTML Paste Clipboard Image to File Input

Question

Okay, here it goes. I have seen the great ways in which one can now paste images to WhatsApp web chats. Most examples use a canvas to capture the pasted clipboard image, how does one paste it to a File Input using only Ctrl + V anywhere on the page?

Here is the code I have for the input which automatically submits as soon as someone selected a file:

      <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

It's pretty straightforward. Just catch paste event on window object and put all the files you got from it to the <input> tag.

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>

Answer 2

Work well

<form action="abc.php" method="post" enctype="multipart/form-data">   <div class="actions"><input type="submit" name="commit" value="Submit" /></div>   <input type="file" name="aaa"/> </form>     <script type="text/javascript"> //e.originalEvent.clipboardData.files 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; });   </script> 

PHP Output: var_dump($_FILES);

array (size=1)   'aaa' =>      array (size=5)       'name' => string 'image.png' (length=9)       'type' => string 'image/png' (length=9)       'tmp_name' => string 'C:\wamp64\tmp\phpF6AF.tmp' (length=25)       'error' => int 0       'size' => int 9380