Skip to content

Instantly share code, notes, and snippets.

@dmitriid
Created September 3, 2021 14:25
Show Gist options
  • Save dmitriid/f65d75653090b10163b5feb09eae136e to your computer and use it in GitHub Desktop.
Save dmitriid/f65d75653090b10163b5feb09eae136e to your computer and use it in GitHub Desktop.
const setUpClipboardHandler = (el) => {
let hasFiles = false;
let counter = 0;
const upload = (fileOrFiles) => {
let fileInput = null;
if (el.dataset.chunkId) {
fileInput = document.querySelector(`form[data-chunk-id="${el.dataset.chunkId}"] input[type="file"]`);
} else {
const els = document.querySelectorAll(`form[data-type="upload-file"] input[type="file"]`);
fileInput = els[els.length - 1];
}
if (fileInput) {
fileInput.files = fileOrFiles;
// Note: this is definitely needed for Chrome
// not needed in Safari
// not tested in FF
var event = document.createEvent('UIEvents');
(event as any).initUIEvent('change', true, true);
fileInput.dispatchEvent(event);
return true;
}
return false;
}
let handleClick = null as any;
if (typeof el.dataset.pasteButton !== 'undefined') {
handleClick = (e) => {
navigator.permissions.query({ name: 'clipboard-read' }).then((auth) => {
if (auth.state !== 'denied') {
const clipboard = navigator.clipboard;
(clipboard as any).read().then(data => {
let dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
const properData = data.filter(item => item.types.some((type) => type.startsWith('image/')));
let processedDataCount = 0;
properData.forEach(item => {
let file_type = item.types.find((type) => type.startsWith('image/'));
item.getType(file_type).then((blob) => {
const file = new File([blob], 'clipboard', { type: file_type });
dataTransfer.items.add(file)
processedDataCount++;
});
})
let intervalId;
let readCounts = 0;
intervalId = setInterval(() => {
if (processedDataCount == properData.length || readCounts > 10) {
upload(dataTransfer.files);
clearInterval(intervalId);
return;
}
readCounts++;
}, 500);
if (dataTransfer.files.length > 0) {
upload(dataTransfer.files);
}
}).catch(e => console.error(e));
}
});
};
el.addEventListener('click', handleClick);
}
const handlePaste = (e) => {
const clipboardData = (e.clipboardData || (window as any).clipboardData);
const files = clipboardData.files;
if (clipboardData.files.length == 0) {
return;
}
if (upload(files)) {
e.preventDefault();
e.stopPropagation();
}
};
el.addEventListener('paste', handlePaste);
return () => {
if (handleClick) {
el.removeEventListener('click', handleClick);
}
el.removeEventListener('paste', handlePaste);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment