Works with any backend npm install Zero dependencies

Paste & Drop Events

Hook into onPaste and onDrop to inspect or reject files from clipboard or drag-drop.

(function() {
 var logEl = document.getElementById('log');
 function log(m) { var d = document.createElement('div'); d.className='pkg-log-entry'; d.textContent=m; logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight; }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 paste: true,
 autoUpload: false,
 onPaste: function(files) {
 log('Pasted ' + files.length + ' file(s):');
 files.forEach(function(f) { log(' ' + f.name + ' ' + MultipleUpload.formatSize(f.size)); });
 },
 onDrop: function(ev) {
 log('Dropped files via drag & drop');
 }
 });
})();

Two routes that are not the file picker

onPaste and onDrop fire for clipboard and drag-and-drop, which between them cover most of how people actually get a screenshot or a downloaded file into a form. Paste is on by default (paste: true); both hand you what arrived before it joins the queue.

Pasted files have no name

A clipboard image is bytes without a file name, so the component names it from the timestamp. If the name means something in your system, this is the hook where you can rename it — and returning false from onPaste lets a page that has its own paste handling opt out entirely.