HTML Paste Clipboard Image to File Input
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>
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