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>

score 42 · Accepted Answer · answered May 19 '18 at 17:33

42

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>

answered May 19 '18 at 17:33

Jake Weary

1,059
6
13

Thanks! Brilliant! – doer123456789 May 19 '18 at 17:38
1

For reference, in case you're wondering, this is supported in all major desktop and mobile browsers according to https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData – A. Genedy Jun 29 '19 at 15:28
Also jquery equivalent is `e.originalEvent.clipboardData.files`. – EgoistDeveloper Feb 02 '21 at 22:18
I tried pasting from macOS' "screenshot to clipboard" function. This returns an `{"error":"key missing: title"}` message. Is there anything I can do? – FBI Surveillance Van Feb 21 '21 at 17:45

score 1 · Answer 2 · answered Feb 24 '21 at 16:39

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

score 0 · Answer 3 · answered Jan 14 '21 at 16:20

0

I just wanted to add that for the above example code to work I actually had to add enctype="multipart/form-data" attribute to the form element.

answered Jan 14 '21 at 16:20

Vaclav Masin

1

What browser were you using. I have been using the suggested answer for years now without issue – doer123456789 Jan 15 '21 at 18:45
Firefox. It's just that it seems that multipart/form-data enctype is required when uploading a file. At least as per: https://www.w3schools.com/TAGs/att_form_enctype.asp: "multipart/form-data No characters are encoded. This value is required when you are using forms that have a file upload control". Perhaps Chrome silently switches to the required enctype or something? – Vaclav Masin Jan 18 '21 at 08:28

HTML Paste Clipboard Image to File Input

3 Answers3

Linked